<!--
 * 借鉴于：https://github.com/xiaodai945/WEBJIKE
-->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <!--头部信息-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>伯爵导航 - 内容最全的前端开发网址导航</title>
    <meta name="keywords" content="前端导航,程序员导航,前端开发学习,前端网址大全,前端教程,小呆导航,网址导航">
    <meta name="description"
          content="前端导航是小呆导航推出的前端开发行业版，收录了大量高质量前端相关站点，为广大用户提供学习网站、学习方向、学习途径、最新前端框架等内容。是国内收录内容最全的前端导航。">
    <!-- zui -->
    <link rel="shortcut icon" type="image/x-icon" href="https://www.webjike.com/favicon.png">
    <link rel="stylesheet" href="https://www.webjike.com/css/zui.min.css">
    <link href="https://www.webjike.com/css/main-style.css?v=3.0.2" rel="stylesheet">
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.10.0/js/md5.js"></script>

</head>


<!--[if lt IE 8]>
<div class="alert alert-danger">您正在使用 <strong>过时的</strong> 浏览器. 是时候 <a href="http://browsehappy.com/">更换一个更好的浏览器</a>
    来提升用户体验.
</div>
<![endif]-->
<!--头部导航条-->
<header id="fenzhi-nav">
    <div class="main">
        <div class="logo">
            <a href="/index.html">
                <img src="https://www.webjike.com/images/logo.png">
                <span>嘉美伯爵</span>
            </a>
        </div>
        <nav class="nav">
            <ul>
                <li><a class="duty-nav" href="/category.html">书签<i class="fa fa-caret-down"></i></a></li>
                <li><a href="https://www.mybt.top/" target="_blank">资源站</a></li>
                <li><a href="https://www.vpnbook.cn/" target="_blank">科普站</a></li>
                <li><a href="https://www.kaoyan400.cn/" target="_blank">考研站</a></li>
                <li><a href="https://www.myvpn.vip/" target="_blank">工具站</a></li>
                <li><a href="https://www.codehub.vip/" target="_blank">IT站</a></li>
                <li><a href="https://www.myinterface.cn/" target="_blank">数据站</a></li>
                <li><a href="https://www.gaozhe.net/" target="_blank">博客站</a></li>
            </ul>
        </nav>
        <button class="nav-btn visible-xs visible-sm">
            <span class="icon-line top"></span>
            <span class="icon-line middle"></span>
            <span class="icon-line bottom"></span>
        </button>
        <div class="mobile-user visible-xs visible-sm">

            <span id="ajaxElement_2_834_loading"></span>
            <span id="ajaxElement_2_834_success" style="display: none"></span>
            <span id="ajaxElement_2_834_failure" style="display: none"></span>


        </div>
        <div id="tow-nav">

            <div class="tow-nav-item">
                <a class="item-img" href="/web.html">前端开发</a>
                <ul>


                </ul>
            </div>

            <div class="tow-nav-item">
                <a class="item-img" href="/ui.html">界面设计</a>
                <ul>



                </ul>
            </div>

            <div class="tow-nav-item">
                <a class="item-img" href="/cg.html">影视后期</a>
                <ul>


                </ul>
            </div>

            <div class="tow-nav-item">
                <a class="item-img" href="/office.html">日常办公</a>
                <ul>


                </ul>
            </div>

        </div>
    </div>


</header>
<div id="content">
    <!--导航条-->
    <div class="mask">

        <div class="fenzhi-nav-item">
            <a class="item-img" href="/web.html"><img src="/upload/images/2018/10/8a051f89bcd0750a.jpg"></a>
        </div>

        <div class="fenzhi-nav-item">
            <a class="item-img" href="/ui.html"><img src="/upload/images/2018/10/3e08d3698b088f88.jpg"></a>
        </div>

        <div class="fenzhi-nav-item">
            <a class="item-img" href="/cg.html"><img src="/upload/images/2018/10/46f51682aee0c3a5.jpg"></a>
        </div>

        <div class="fenzhi-nav-item">
            <a class="item-img" href="/office.html"><img src="/upload/images/2018/10/9a40eea2605a4965.jpg"></a>
        </div>

    </div>
    <div class="left-bar">

        <div class="header"><h2>前端开发</h2></div>
        <div class="menu" id="menu">
            <ul class="scrollcontent">

                <li><a href="/category.html#row-1"><i class="fa fa-video-camera"></i>视频教程</a></li>

                <li><a href="/web.html#row-2"><i class="fa fa-book"></i>在线学习</a></li>

                <li><a href="/web.html#row-3"><i class="fa fa-puzzle-piece"></i>碎片学习</a></li>

                <li><a href="/web.html#row-4"><i class="fa fa-wrench"></i>学习工具</a></li>

                <li><a href="/web.html#row-5"><i class="fa fa-server"></i>WEB公共库</a></li>

                <li><a href="/web.html#row-6"><i class="fa fa-users"></i>前端组织</a></li>

                <li><a href="/web.html#row-7"><i class="fa fa-commenting"></i>社区/论坛</a></li>

                <li><a href="/web.html#row-8"><i class="fa fa-magnet"></i>UI 框架</a></li>

                <li><a href="/web.html#row-9"><i class="fa fa-file-code-o"></i>JS 框架</a></li>

                <li><a href="/web.html#row-10"><i class="fa fa-paper-plane"></i>前端插件</a></li>

                <li><a href="/web.html#row-11"><i class="fa fa-tablet"></i>移动框架</a></li>

                <li><a href="/web.html#row-12"><i class="fa fa-hourglass-2"></i>预处理器</a></li>

                <li><a href="/web.html#row-13"><i class="fa fa-font"></i>字体图标</a></li>

                <li><a href="/web.html#row-14"><i class="fa fa-cogs"></i>构建工具</a></li>

                <li><a href="/web.html#row-15"><i class="fa fa-cubes"></i>模块加载</a></li>

                <li><a href="/web.html#row-16"><i class="fa fa-briefcase"></i>包管理器</a></li>

                <li><a href="/web.html#row-17"><i class="fa fa-dashboard"></i>模板引擎</a></li>

                <li><a href="/web.html#row-18"><i class="fa fa-gamepad"></i>游戏引擎</a></li>

                <li><a href="/web.html#row-19"><i class="fa fa-sun-o"></i>代码高亮</a></li>

                <li><a href="/web.html#row-20"><i class="fa fa-github"></i>代码托管</a></li>

                <li><a href="/web.html#row-21"><i class="fa fa-wordpress"></i>博客系统</a></li>

                <li><a href="/web.html#row-22"><i class="fa fa-jsfiddle"></i>域名/服务器</a></li>

                <li><a href="/web.html#row-23"><i class="fa fa-paperclip"></i>辅助工具</a></li>

                <li><a href="/web.html#row-24"><i class="fa fa-flag"></i>站长工具</a></li>

                <li><a href="/web.html#row-25"><i class="fa fa-photo"></i>图片素材</a></li>

                <li><a href="/web.html#row-26"><i class="fa fa-thumbs-o-up"></i>精选酷站</a></li>

            </ul>
        </div>


        <div class="menu-about">
            <span>Powered by <a href="/index.html">小呆导航 3.0</a></span>
        </div>
    </div>
    <!--内容-->
    <div class="duty-main">
        <div class="container content-box">
            <section class="sousuo">
                <div class="search">
                    <div class="search-box">
                        <span class="search-icon" style="background: url('/images/search_icon.png')"></span>
                        <input type="text" id="txt" class="search-input" placeholder="请输入关键字，按回车 / Enter 搜索"/>
                        <button class="search-btn" id="search-btn"><i class="fa fa-search"></i></button>
                    </div>
                    <!-- 搜索热词 -->
                    <div class="box search-hot-text" id="box" style="display: none">
                        <ul></ul>
                    </div>
                    <!-- 搜索引擎 -->
                    <div class="search-engine">
                        <div class="search-engine-head">
                            <strong class="search-engine-tit">选择您的默认搜索引擎：</strong>
                            <div class="search-engine-tool">搜索热词： <span id="hot-btn"></span></div>
                        </div>
                        <ul class="search-engine-list">
                        </ul>
                    </div>
                    <!--<div class="bt-link"><a href="https://ibaotu.com/ppt/3-0-0-0-0-1.html?format_type=0&spm=cndesign&utm_source=BD&utm_medium=%E5%B0%8F%E5%91%86%E5%AF%BC%E8%88%AA&utm_campaign=%E5%8A%9E%E5%85%AC" target="_blank">福利：2000套精美PPT模板，一键套用，立即领取！</a></div>-->
                </div>
            </section>
            <div class="row duty-custom">
                <div class="col-md-12">
                    <strong class="duty-item-name"><i class="fa fa-html5"></i>任你创造<span
                            class="pull-right hidden-xs hidden-sm" id="duty-custom-btn"><i
                            class="fa fa-cog"></i>自定义</span></strong>
                </div>
                <div class="col-md-12">
                    <ul class="duty-custom-item">

                        <li><a class="duty-custom-link" href="http://www.w3school.com.cn/">w3school</a></li>

                        <li><a class="duty-custom-link" href="https://v3.bootcss.com/">Bootstrap</a></li>

                        <li><a class="duty-custom-link" href="https://www.jquery123.com/">jQuery</a></li>

                        <li><a class="duty-custom-link" href="https://cn.vuejs.org/">Vue.js</a></li>

                        <li><a class="duty-custom-link" href="https://reactjs.org/">React.js</a></li>

                        <li><a class="duty-custom-link" href="https://angularjs.org/">Angular.js</a></li>

                        <li><a class="duty-custom-link" href="https://webpack.github.io/">webpack</a></li>

                        <li><a class="duty-custom-link" href="https://gruntjs.com/">Grunt</a></li>

                        <li><a class="duty-custom-link" href="https://github.com/">GitHub</a></li>

                        <li><a class="duty-custom-link" href="https://www.iconfont.cn/">Iconfont</a></li>

                        <li><a class="duty-custom-link" href="https://nodejs.org/en/">Nodejs</a></li>

                        <li><a class="duty-custom-link" href="https://www.npmjs.com/">Npm</a></li>

                        <li><a class="duty-custom-link" href="https://hexo.io/zh-cn/">Hexo</a></li>

                        <li><a class="duty-custom-link" href="https://www.jekyll.com.cn/">Jekyll</a></li>

                        <li><a class="duty-custom-link" href="http://jsbin.com/">JS Bin</a></li>

                        <li><a class="duty-custom-link" href="https://codepen.io/pen/">CodePen</a></li>

                        <li><a class="duty-custom-link" href="https://www.v2ex.com/">V2EX</a></li>

                        <li><a class="duty-custom-link" href="https://segmentfault.com/">SegmentFault</a></li>

                        <li><a class="duty-custom-link" href="https://juejin.im/">掘金</a></li>

                        <li><a class="duty-custom-link" href="https://www.bootcdn.cn/">BootCDN</a></li>

                        <li><a class="duty-custom-link" href="https://www.awesomes.cn/">Awesomes</a></li>

                        <li><a class="duty-custom-link" href="https://cn.wordpress.org/">WordPress</a></li>

                        <li><a class="duty-custom-link" href="http://stylus-lang.com/">Stylus</a></li>

                        <li><a class="duty-custom-link" href="https://www.babeljs.cn/">Babel</a></li>

                    </ul>
                </div>
                <!--职业导航自定义面板-->
                <div class="col-md-12">
                    <ul class="duty-customize">
                        <li id="duty-local-save">本 地 保 存</li>
                        <li id="duty-server-save">云 端 保 存</li>
                        <li id="duty-sync-data">数 据 同 步</li>
                        <li id="duty-restore-data">恢 复 默 认</li>
                        <li id="duty-out">关 闭 面 板</li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="duty-tool">
                        <div class="duty-tool-notice">
                            <i class="fa fa-volume-up" aria-hidden="true"></i>
                            <span>小呆导航 3.0 全新版本强势来袭！新增会员、投稿等功能，目前功能测试中，欢迎提出你的反馈与建议，谢谢支持。</span>
                        </div>
                        <ul class="duty-tool-switch hidden-xs hidden-sm">
                            <li><span>图标</span><i class="fa fa-toggle-on"></i></li>
                            <li><span>简介</span><i class="fa fa-toggle-on"></i></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-1" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-video-camera"></i>视频教程</strong>
                </div>
                <div class="col-md-12 two-list-box">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.imooc.com/" class="duty-card" target="_blank"
                               title="慕课网 - 程序员的梦工厂，慕课网是垂直的互联网IT技能免费学习网站。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/12477e879c32ff6.jpg">慕课网
                                </div>
                                <div class="duty-card-des">程序员的梦工厂，慕课网是垂直的互联网IT技能免费学习网站。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.jikexueyuan.com/" class="duty-card" target="_blank"
                               title="极客学院 - 一家很不错的IT职业在线教育平台，入门教程视频通俗易懂，很适合新手学习。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/842106729c4621e7.jpg">极客学院
                                </div>
                                <div class="duty-card-des">一家很不错的IT职业在线教育平台，入门教程视频通俗易懂，很适合新手学习。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.zhaikexueyuan.com/" class="duty-card" target="_blank"
                               title="宅客学院 - IT职业教育线上品牌，课程涵盖大数据、前端开发、后端开发等，免费课程挺多的。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/5f6091b78dfddbc1.jpg">宅客学院
                                </div>
                                <div class="duty-card-des">IT职业教育线上品牌，课程涵盖大数据、前端开发、后端开发等，免费课程挺多的。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://jirengu.com/app/album/index" class="duty-card" target="_blank"
                               title="饥人谷 - 一家收费的前端开发线上培训机构，虽然课程收费，但是官网还是有挺多免费教程视频的。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/9461d14d54e6841d.jpg">饥人谷
                                </div>
                                <div class="duty-card-des">一家收费的前端开发线上培训机构，虽然课程收费，但是官网还是有挺多免费教程视频的。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://study.163.com/category/it" class="duty-card" target="_blank"
                               title="网易云课程 - 编程开发 - 网易旗下实用技能学习平台，内容非常丰富，免费教程也挺多的。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/79beca65ce8bc119.png">网易云课程
                                    - 编程开发
                                </div>
                                <div class="duty-card-des">网易旗下实用技能学习平台，内容非常丰富，免费教程也挺多的。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://ke.qq.com/course/list?mt=1001" class="duty-card" target="_blank"
                               title="腾讯课程 - IT·互联网 - 腾讯推出的专业在线教育平台，采用直播教学方式，适合有充裕时间学习的同学。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/fade5e1bbefe8d99.jpg">腾讯课程
                                    - IT·互联网
                                </div>
                                <div class="duty-card-des">腾讯推出的专业在线教育平台，采用直播教学方式，适合有充裕时间学习的同学。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://chuanke.baidu.com/course/72351176527446016.html" class="duty-card"
                               target="_blank" title="百度传课 - 编程语言 - 百度推出的教育领域新兴在线教育平台，免费视频教程很丰富，基本都是免费的。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/e98eea5c069dfabb.jpg">百度传课
                                    - 编程语言
                                </div>
                                <div class="duty-card-des">百度推出的教育领域新兴在线教育平台，免费视频教程很丰富，基本都是免费的。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.ycku.com/" class="duty-card" target="_blank"
                               title="瓢城Web俱乐部 - 一个不错的在线视频教程网站，部分教程还在持续更新中。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/71cd3036659ca229.png">瓢城Web俱乐部
                                </div>
                                <div class="duty-card-des">一个不错的在线视频教程网站，部分教程还在持续更新中。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.yun.lu" class="duty-card" target="_blank"
                               title="云路课堂 - 专业的职业技能学习平台，免费课程很多。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/714fd14ba24c4f05.png">云路课堂
                                </div>
                                <div class="duty-card-des">专业的职业技能学习平台，免费课程很多。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.howzhi.com/channel/IT-internet" class="duty-card" target="_blank"
                               title="好知网 - IT互联网 - 好知网是一个综合性在线学习平台，有大量的在线课程，部分课程收费&#65281;">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/d783b03661151a61.png">好知网
                                    - IT互联网
                                </div>
                                <div class="duty-card-des">好知网是一个综合性在线学习平台，有大量的在线课程，部分课程收费&#65281;</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-2" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-book"></i>在线学习</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.w3school.com.cn" class="duty-card" target="_blank"
                               title="w3school - 领先的免费 Web 技术教程，在 w3school，你可以找到你所需要的所有的网站建设教程。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/f1fec4b71457dfd3.jpg">w3school
                                </div>
                                <div class="duty-card-des">领先的免费 Web 技术教程，在 w3school，你可以找到你所需要的所有的网站建设教程。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.runoob.com/" class="duty-card" target="_blank"
                               title="菜鸟教程 - 学的不仅是技术，更是梦想&#65281;该站提供了很全的编程技术基础教程，适合入门学习。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/b7e82395f78d6d4b.png">菜鸟教程
                                </div>
                                <div class="duty-card-des">学的不仅是技术，更是梦想&#65281;该站提供了很全的编程技术基础教程，适合入门学习。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://developer.mozilla.org/zh-CN/docs/Learn" class="duty-card" target="_blank"
                               title="MDN Web 文档 - 一个提供 Web 技术和促进 Web 技术软件的不断发展的学习平台">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/d423f5847e9667b9.png">MDN
                                    Web 文档
                                </div>
                                <div class="duty-card-des">一个提供 Web 技术和促进 Web 技术软件的不断发展的学习平台</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.hubwiz.com/" class="duty-card" target="_blank"
                               title="汇智网 - 汇智网是一个学习最前沿编程技术的平台，提供了node.js、js、jq等相关的课程。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/b02c4c6d67862318.jpg">汇智网
                                </div>
                                <div class="duty-card-des">汇智网是一个学习最前沿编程技术的平台，提供了node.js、js、jq等相关的课程。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.w3cways.com/" class="duty-card" target="_blank"
                               title="W3Cways - Web前端学习之路，网站提供很丰富的相关技术中文文档。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/7547849854582437.jpg">W3Cways
                                </div>
                                <div class="duty-card-des">Web前端学习之路，网站提供很丰富的相关技术中文文档。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.css88.com/" class="duty-card" target="_blank"
                               title="WEB前端开发 - 一个前端开发技术和前端开发资讯的专业博客，专注前端开发，关注用户体验。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/8d3e38a022e4c9c8.png">WEB前端开发
                                </div>
                                <div class="duty-card-des">一个前端开发技术和前端开发资讯的专业博客，专注前端开发，关注用户体验。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://li-xinyang.gitbooks.io/frontend-notebook/content/" class="duty-card"
                               target="_blank" title="前端开发笔记本 - 《前端笔记本》涵盖了 Web 前端开发所需的全部基本知识以及所对应的学习路径。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/9e8ff587cd31ebd8.jpg">前端开发笔记本
                                </div>
                                <div class="duty-card-des">《前端笔记本》涵盖了 Web 前端开发所需的全部基本知识以及所对应的学习路径。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://dwqs.gitbooks.io/frontenddevhandbook/content/" class="duty-card"
                               target="_blank" title="前端开发者手册 - 这是任何人都可以用来学习前端的实践手册, 它概述并讨论了前端工程的实践。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/a1c0c6cf257d2d3c.jpg">前端开发者手册
                                </div>
                                <div class="duty-card-des">这是任何人都可以用来学习前端的实践手册, 它概述并讨论了前端工程的实践。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.gbtags.com" class="duty-card" target="_blank"
                               title="极客标签 - 极客标签是一个基于web的在线极客编程知识分享&学习平台，能够帮助你快速高效地学习代码编程并方便的在线实时分享编程技巧和心得。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/3a4f5a034876dc86.jpg">极客标签
                                </div>
                                <div class="duty-card-des">
                                    极客标签是一个基于web的在线极客编程知识分享&学习平台，能够帮助你快速高效地学习代码编程并方便的在线实时分享编程技巧和心得。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.aseoe.com/special/" class="duty-card" target="_blank"
                               title="爱思资源网 - 专注web前端开发与php编程设计，是一个专业技术交流、资源共享的web前端开发工程师平台&#65281;">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/5c06d5e35de51dda.jpg">爱思资源网
                                </div>
                                <div class="duty-card-des">专注web前端开发与php编程设计，是一个专业技术交流、资源共享的web前端开发工程师平台&#65281;</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://reactnative.cn/" class="duty-card" target="_blank"
                               title="React Native中文网 - React Native中文网是中国最大的React Native开发者交流学习平台, 致力于打造React Native开发。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/47fc7088c3dbd852.jpg">React
                                    Native中文网
                                </div>
                                <div class="duty-card-des">React Native中文网是中国最大的React Native开发者交流学习平台, 致力于打造React
                                    Native开发。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://css.doyoe.com/" class="duty-card" target="_blank"
                               title="CSS参考手册 - Web前端开发人员提供最新、最全的CSS中文版在线资料，涵盖CSS3参考手册。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/f5b427abbed05fca.jpg">CSS参考手册
                                </div>
                                <div class="duty-card-des">Web前端开发人员提供最新、最全的CSS中文版在线资料，涵盖CSS3参考手册。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://leetcode-cn.com/" class="duty-card" target="_blank"
                               title="力扣（LeetCode） - 全球极客挚爱的技术成长平台，算法学习网站">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2019/8/36b80e74d4475ee3.jpg">力扣（LeetCode）
                                </div>
                                <div class="duty-card-des">全球极客挚爱的技术成长平台，算法学习网站</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.nowcoder.com/" class="duty-card" target="_blank"
                               title="牛客网 -  互联网求职神器和备考学习平台，各种面试题和面经分享">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/e6e052bea268163a.jpg">牛客网
                                </div>
                                <div class="duty-card-des"> 互联网求职神器和备考学习平台，各种面试题和面经分享</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://ife.baidu.com/" class="duty-card" target="_blank"
                               title="百度前端技术学院 - 由百度创办的免费前端技术学习实践、交流、分享平台">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2019/8/d2ea6ca1924a2f42.jpg">百度前端技术学院
                                </div>
                                <div class="duty-card-des">由百度创办的免费前端技术学习实践、交流、分享平台</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-3" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-puzzle-piece"></i>碎片学习</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://browserhacks.com/" class="duty-card" target="_blank"
                               title="浏览器hack大全 - 由于不同的浏览器，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，于是就有了针对不同的浏览器写不同的CSS code，这就叫CSS hack">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/afc5cbcb824cc5d9.png">浏览器hack大全
                                </div>
                                <div class="duty-card-des">由于不同的浏览器，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，于是就有了针对不同的浏览器写不同的CSS
                                    code，这就叫CSS hack
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://daneden.github.io/animate.css/" class="duty-card" target="_blank"
                               title="Animate动画库 - 各种Animate动画案例，可以直接预览效果，如果你稍微会点Animate知识，可以试着去读源代码，帮助自己提高Animate技能">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/f960fbc8f72aaa35.jpg">Animate动画库
                                </div>
                                <div class="duty-card-des">
                                    各种Animate动画案例，可以直接预览效果，如果你稍微会点Animate知识，可以试着去读源代码，帮助自己提高Animate技能
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://css3clickchart.com/#box-sizing" class="duty-card" target="_blank"
                               title="CSS Click Chart - 可以查询到目前CSS3草案部分的相关属性">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/c5d51725c4b8cf93.png">CSS
                                    Click Chart
                                </div>
                                <div class="duty-card-des">可以查询到目前CSS3草案部分的相关属性</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://nqdeng.github.io/7-days-nodejs/" class="duty-card" target="_blank"
                               title="七天学会NodeJS - 阿里国际站前端技术部写的一个博文，如果有耐心读完，相信还是有不少收获的。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/caa3b227baad960e.jpg">七天学会NodeJS
                                </div>
                                <div class="duty-card-des">阿里国际站前端技术部写的一个博文，如果有耐心读完，相信还是有不少收获的。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://nec.netease.com/" class="duty-card" target="_blank"
                               title="NEC(CSS规范) - NEC包括了规范、框架、代码库、插件等内容，致力于为前端开发人员提供高效率高质量的前端页面开发解决方案。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/92664fcfb80ba4b6.png">NEC(CSS规范)
                                </div>
                                <div class="duty-card-des">NEC包括了规范、框架、代码库、插件等内容，致力于为前端开发人员提供高效率高质量的前端页面开发解决方案。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.zhangxinxu.com/jq/stylus/" class="duty-card" target="_blank"
                               title="Stylus中文文档 - 张鑫旭 - stylus中文版参考文档之综述">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/73468ef8a56720af.png">Stylus中文文档
                                </div>
                                <div class="duty-card-des">张鑫旭 - stylus中文版参考文档之综述</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.hewebgl.com/" class="duty-card" target="_blank"
                               title="WebGL中文网 - 国内最好、最系统的WebGL教程网站。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/e72b7d8b6999c3e4.png">WebGL中文网
                                </div>
                                <div class="duty-card-des">国内最好、最系统的WebGL教程网站。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://easings.net/zh-cn" class="duty-card" target="_blank"
                               title="缓动函数速查表 - 缓动函数指定动画效果在执行时的速度，使其看起来更加真实. 本页可以在每次你需要时，帮助你找到想要的缓动函数。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/b6c331c467dd03ac.png">缓动函数速查表
                                </div>
                                <div class="duty-card-des">缓动函数指定动画效果在执行时的速度，使其看起来更加真实. 本页可以在每次你需要时，帮助你找到想要的缓动函数。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-4" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-wrench"></i>学习工具</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://jsbin.com" class="duty-card" target="_blank"
                               title="JS Bin - 一个在线网站代码调试工具，主要用于测试 JavaScript 和 CSS 的代码片段的Web 应用，拥有简单的操作界面和全面的测试环境。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/e43efa9fd4d43c37.png">JS
                                    Bin
                                </div>
                                <div class="duty-card-des">一个在线网站代码调试工具，主要用于测试 JavaScript 和 CSS 的代码片段的Web
                                    应用，拥有简单的操作界面和全面的测试环境。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://jsfiddle.net/" class="duty-card" target="_blank"
                               title="JSFiddle - 一个老牌的在线JS代码调试工具，支持javascript、css、html代码可视化在线调试工具,支持多种应用多种主流框架,用起来非常方便">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/8f76df04afe27a23.png">JSFiddle
                                </div>
                                <div class="duty-card-des">
                                    一个老牌的在线JS代码调试工具，支持javascript、css、html代码可视化在线调试工具,支持多种应用多种主流框架,用起来非常方便
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://codepen.io/pen" class="duty-card" target="_blank"
                               title="CodePen - CodePen是浏览器中的HTML，CSS和JavaScript代码编辑器，可即时预览查看和编写您的代码。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/5fb617fb23cff988.png">CodePen
                                </div>
                                <div class="duty-card-des">CodePen是浏览器中的HTML，CSS和JavaScript代码编辑器，可即时预览查看和编写您的代码。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.gitbook.com/" class="duty-card" target="_blank"
                               title="GitBook - GitBook 是一个基于 Node.js 的命令行工具，可使用 Github/Git 和 Markdown 来制作精美的电子书。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/4b9e68253a43ce9a.png">GitBook
                                </div>
                                <div class="duty-card-des">GitBook 是一个基于 Node.js 的命令行工具，可使用 Github/Git 和 Markdown
                                    来制作精美的电子书。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.kancloud.cn/" class="duty-card" target="_blank"
                               title="看云 - 看云专注于文档的在线创作、协作、分享和托管服务，致力于提供最佳的在线创作和阅读体验,让企业和个人可以更方便地发布和管理自己的文档。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/60a4606079b1d01e.png">看云
                                </div>
                                <div class="duty-card-des">
                                    看云专注于文档的在线创作、协作、分享和托管服务，致力于提供最佳的在线创作和阅读体验,让企业和个人可以更方便地发布和管理自己的文档。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://zhibimo.com/" class="duty-card" target="_blank"
                               title="知笔墨 - 知笔墨可以使用Markdown格式与Git版本控制工具来进行图书的编写、构建与发布工作，同时还提供了在线编辑器。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/467e57a0bba6d69a.png">知笔墨
                                </div>
                                <div class="duty-card-des">知笔墨可以使用Markdown格式与Git版本控制工具来进行图书的编写、构建与发布工作，同时还提供了在线编辑器。
                                </div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-5" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-server"></i>WEB公共库</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.bootcdn.cn/" class="duty-card" target="_blank"
                               title="BootCDN - 稳定、快速、免费的开源项目 CDN 服务，共收录了 3300&#43; 开源项目。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/c250ebcf1766d7aa.png">BootCDN
                                </div>
                                <div class="duty-card-des">稳定、快速、免费的开源项目 CDN 服务，共收录了 3300&#43; 开源项目。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.staticfile.org/" class="duty-card" target="_blank"
                               title="Staticfile CDN - 为开源库提供稳定、快速的免费 CDN 服务，类似于CDNJS，非常推荐。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/49e12d0792585b8c.png">Staticfile
                                    CDN
                                </div>
                                <div class="duty-card-des">为开源库提供稳定、快速的免费 CDN 服务，类似于CDNJS，非常推荐。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://cdnjs.com/" class="duty-card" target="_blank"
                               title="cdnjs - 最全的CDN公用库, 速度不是太稳定。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/59623ce0c3041e2f.png">cdnjs
                                </div>
                                <div class="duty-card-des">最全的CDN公用库, 速度不是太稳定。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview" class="duty-card"
                               target="_blank" title="微软CDN - 微软公司提供的公共CDN服务。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/9f09d5ccb0a47177.jpg">微软CDN
                                </div>
                                <div class="duty-card-des">微软公司提供的公共CDN服务。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://jscdn.upai.com/?spm=a2c4e.11155515.0.0.kf06Hb" class="duty-card"
                               target="_blank" title="又拍云CDN - 又拍云JS库加速服务，你可以在自己的网页上直接通过script标记引用这些资源。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/76d6ac7d8bfee713.jpg">又拍云CDN
                                </div>
                                <div class="duty-card-des">又拍云JS库加速服务，你可以在自己的网页上直接通过script标记引用这些资源。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.awesomes.cn/" class="duty-card" target="_blank"
                               title="Awesomes - Web前端开发工程师需要的免费开源的高质量前端库、框架和插件。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/df3464494acf97c1.jpg">Awesomes
                                </div>
                                <div class="duty-card-des">Web前端开发工程师需要的免费开源的高质量前端库、框架和插件。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.templatesy.com/" class="duty-card" target="_blank"
                               title="模板世界 - 优质网站模板精选">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2019/1/e3770776a5b6d8fe.jpg">模板世界
                                </div>
                                <div class="duty-card-des">优质网站模板精选</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.jq22.com/ " class="duty-card" target="_blank"
                               title="jQuery插件库 - 收集最全最新最好的jQuery插件">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2019/1/d9bc8c6d785b00b6.jpg">jQuery插件库
                                </div>
                                <div class="duty-card-des">收集最全最新最好的jQuery插件</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.17sucai.com/" class="duty-card" target="_blank"
                               title="17素材 - jQuery网页特效最全网页模板和网站模板">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2019/1/6a7f70352df36275.jpg">17素材
                                </div>
                                <div class="duty-card-des">jQuery网页特效最全网页模板和网站模板</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.htmleaf.com/" class="duty-card" target="_blank"
                               title="jQuery之家 - 自由分享jQuery、html5和css3的插件库">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2019/1/327a15bc90286b08.jpg">jQuery之家
                                </div>
                                <div class="duty-card-des">自由分享jQuery、html5和css3的插件库</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-6" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-users"></i>前端组织</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.w3.org/" class="duty-card" target="_blank"
                               title="万维网联盟W3C - 万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/31ea9216167fbc8f.jpg">万维网联盟W3C
                                </div>
                                <div class="duty-card-des">万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://feexp.org/" class="duty-card" target="_blank"
                               title="前端体验大会 - 互联网前端业界一个交流会组织，旨在推动互联网前端web技术在中国的发展，致力于为同行从业者提供一个分享和交流的平台，提升从业者的影响力及技术能力储备。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/273e79050aab72d.png">前端体验大会
                                </div>
                                <div class="duty-card-des">
                                    互联网前端业界一个交流会组织，旨在推动互联网前端web技术在中国的发展，致力于为同行从业者提供一个分享和交流的平台，提升从业者的影响力及技术能力储备。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://jsconf.cn/" class="duty-card" target="_blank"
                               title="JSConf - JavaScript中国开发者大会&#40;JSConf China&#41;是一个围绕 JS 开发者为中心的活动。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/85a5beb6112b18d9.png">JSConf
                                </div>
                                <div class="duty-card-des">JavaScript中国开发者大会&#40;JSConf China&#41;是一个围绕 JS 开发者为中心的活动。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://fex.baidu.com/" class="duty-card" target="_blank"
                               title="百度FEX - FEX 是百度Web 前端研发部的别名，是社区基础技术部中的前端团队。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/8a26940195565f71.png">百度FEX
                                </div>
                                <div class="duty-card-des">FEX 是百度Web 前端研发部的别名，是社区基础技术部中的前端团队。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://efe.baidu.com/" class="duty-card" target="_blank"
                               title="百度EFE - 百度EFE技术体系，前身是ECOM前端团队，后经过技术的发展，逐渐形成一套完善的前端技术体系。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/ee6c0b86eef19cb8.png">百度EFE
                                </div>
                                <div class="duty-card-des">百度EFE技术体系，前身是ECOM前端团队，后经过技术的发展，逐渐形成一套完善的前端技术体系。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://imweb.io/" class="duty-card" target="_blank"
                               title="腾讯IMWeb - IMWEB团队主要负责腾讯课堂，多人社交互动视频以及活动组织类项目的研发工作。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/c1f8bfef07722db2.jpg">腾讯IMWeb
                                </div>
                                <div class="duty-card-des">IMWEB团队主要负责腾讯课堂，多人社交互动视频以及活动组织类项目的研发工作。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.alloyteam.com/" class="duty-card" target="_blank"
                               title="AlloyTeam - 来自于腾讯SNG&#40;社交网络事业群&#41;，是主要负责腾讯Q&#43;、WebQQ、QQ群空间项目的团队，致力于Web前端技术的研究。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/a05672f987b64bbd.png">AlloyTeam
                                </div>
                                <div class="duty-card-des">来自于腾讯SNG&#40;社交网络事业群&#41;，是主要负责腾讯Q&#43;、WebQQ、QQ群空间项目的团队，致力于Web前端技术的研究。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://75team.com/" class="duty-card" target="_blank"
                               title="奇舞团 - 奇虎360公司Web平台部前端工程师 &#43; 部分特约嘉宾 组成的一个前端团队。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/a226b6446ed75e94.png">奇舞团
                                </div>
                                <div class="duty-card-des">奇虎360公司Web平台部前端工程师 &#43; 部分特约嘉宾 组成的一个前端团队。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://taobaofed.org/" class="duty-card" target="_blank"
                               title="Taobao FED - 淘宝前端团队，用技术为体验提供无限可能。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/36997f196fe55e7.png">Taobao
                                    FED
                                </div>
                                <div class="duty-card-des">淘宝前端团队，用技术为体验提供无限可能。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-7" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-commenting"></i>社区/论坛</strong>
                </div>
                <div class="col-md-12
<!--
stl:channel
error: 未将对象引用设置到对象的实例。
stl: <stl:channel type=imgLink_Box />
-->">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://juejin.im/" class="duty-card" target="_blank"
                               title="掘金 - 掘金是一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer News，和给产品经理用的 Medium。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/f65b5b05e672317f.png">掘金
                                </div>
                                <div class="duty-card-des">掘金是一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer
                                    News，和给产品经理用的 Medium。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://segmentfault.com/" class="duty-card" target="_blank"
                               title="SegmentFault - 中国领先的开发者技术社区，我们希望为编程爱好者提供一个纯粹、高质的技术交流的平台, 与开发者一起学习、交流与成长。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/a678dd8b0c37b1d5.jpg">SegmentFault
                                </div>
                                <div class="duty-card-des">中国领先的开发者技术社区，我们希望为编程爱好者提供一个纯粹、高质的技术交流的平台, 与开发者一起学习、交流与成长。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://laravel-china.org/" class="duty-card" target="_blank"
                               title="Laravel China - 一个高品质的 Laravel 开发者社区，致力于为 Laravel 和 PHP 开发者提供一个分享创造、结识伙伴、协同互助的论坛。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/8d53bb883900905f.jpg">Laravel
                                    China
                                </div>
                                <div class="duty-card-des">一个高品质的 Laravel 开发者社区，致力于为 Laravel 和 PHP
                                    开发者提供一个分享创造、结识伙伴、协同互助的论坛。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.v2ex.com/" class="duty-card" target="_blank"
                               title="V2EX - 一个汇集各类奇妙好玩的话题和流行动向的网站，V2EX 提供了特别有用的小工具 &#91; ZEN &#93;，帮助你掌握自己的时间。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/45cc75299bf8f76c.jpg">V2EX
                                </div>
                                <div class="duty-card-des">一个汇集各类奇妙好玩的话题和流行动向的网站，V2EX 提供了特别有用的小工具 &#91; ZEN &#93;，帮助你掌握自己的时间。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://cnodejs.org/" class="duty-card" target="_blank"
                               title="CNode - CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/b47e2ed2372691ea.png">CNode
                                </div>
                                <div class="duty-card-des">CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.oschina.net/" class="duty-card" target="_blank"
                               title="开源中国 - 开源中国是目前中国最大的开源技术社区，我们传播开源的理念，推广开源项目，为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/bd9898603e900b7b.jpg">开源中国
                                </div>
                                <div class="duty-card-des">开源中国是目前中国最大的开源技术社区，我们传播开源的理念，推广开源项目，为 IT
                                    开发者提供了一个发现、使用、并交流开源技术的平台。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="" class="duty-card" target="_blank"
                               title="深度开源 - 收录最全、最新的开源软件/开源项目，发掘开源价值,发布最新IT资讯，提供开发文档，技术经验分享。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/e30d7274ca9bb76e.gif">深度开源
                                </div>
                                <div class="duty-card-des">收录最全、最新的开源软件/开源项目，发掘开源价值,发布最新IT资讯，提供开发文档，技术经验分享。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.daqianduan.com/" class="duty-card" target="_blank"
                               title="大前端 - 大前端是一个关注前端开发、用户体验设计、HTML5、CSS3、Javascript的前端开发独立博客。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/d41490fb046ac65d.png">大前端
                                </div>
                                <div class="duty-card-des">大前端是一个关注前端开发、用户体验设计、HTML5、CSS3、Javascript的前端开发独立博客。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.ibm.com/developerworks/cn/" class="duty-card" target="_blank"
                               title="developerWork - IBM 的官方开发者项目，在这里你可以访问和下载试用版软件，查找丰富的 IT 技术资源&#40;文章、教程、视频和代码等&#41;,和专业的 IT 从业人员交流。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/ac0b9d3b88608193.jpg">developerWork
                                </div>
                                <div class="duty-card-des">IBM 的官方开发者项目，在这里你可以访问和下载试用版软件，查找丰富的 IT 技术资源&#40;文章、教程、视频和代码等&#41;,和专业的
                                    IT 从业人员交流。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://aotu.io/" class="duty-card" target="_blank"
                               title="Aotu.io「凹凸实验室」 - 凹凸实验室&#40;Aotu.io&#41; 始建于2015年，是一个年轻基情的技术社区组织。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/ca8836c22f744873.png">Aotu.io「凹凸实验室」
                                </div>
                                <div class="duty-card-des">凹凸实验室&#40;Aotu.io&#41; 始建于2015年，是一个年轻基情的技术社区组织。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-8" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-magnet"></i>UI 框架</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://v3.bootcss.com/" class="duty-card" target="_blank"
                               title="Bootstrap - 最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/147cc14799fd6749.jpg">Bootstrap
                                </div>
                                <div class="duty-card-des">最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://foundation.zurb.com/" class="duty-card" target="_blank"
                               title="Foundation - Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/cb5292cba7645837.png">Foundation
                                </div>
                                <div class="duty-card-des">Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://element-cn.eleme.io/#/zh-CN" class="duty-card" target="_blank"
                               title="Element - 饿了么前端团队开发的基于 Vue 2.0 的桌面端组件库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/10/a9bb75c6ec82ae55.jpg">Element
                                </div>
                                <div class="duty-card-des">饿了么前端团队开发的基于 Vue 2.0 的桌面端组件库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://semantic-ui.cn/" class="duty-card" target="_blank"
                               title="Semantic UI中文官方网站 - Semantic 是一个用来帮助创建漂亮、响应化、人性化的开发框架">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/f2fe8864ffff8dc9.png">Semantic
                                    UI中文官方网站
                                </div>
                                <div class="duty-card-des">Semantic 是一个用来帮助创建漂亮、响应化、人性化的开发框架</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://ant.design/index-cn" class="duty-card" target="_blank"
                               title=" Ant Design - 一个服务于企业级产品的设计体系，基于&#12302;确定&#12303;和&#12302;自然&#12303;的设计价值观，通过模块化的解决方案，让设计者专注于更好的用户体验。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/502c611eee6ce9d6.png">
                                    Ant Design
                                </div>
                                <div class="duty-card-des">一个服务于企业级产品的设计体系，基于&#12302;确定&#12303;和&#12302;自然&#12303;的设计价值观，通过模块化的解决方案，让设计者专注于更好的用户体验。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://jqueryui.com/" class="duty-card" target="_blank"
                               title="jQuery UI - jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/ab8da1da027f1cfb.gif">jQuery
                                    UI
                                </div>
                                <div class="duty-card-des">jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.jeasyui.net/" class="duty-card" target="_blank"
                               title="Jquery EasyUI中文网 - easyui是一种基于jQuery的用户界面插件集合。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/3c6dbce53f4733cb.png">Jquery
                                    EasyUI中文网
                                </div>
                                <div class="duty-card-des">easyui是一种基于jQuery的用户界面插件集合。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.layui.com/" class="duty-card" target="_blank"
                               title="Layui - Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/8c90a8c835f2a1a5.jpg">Layui
                                </div>
                                <div class="duty-card-des">Layui
                                    是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://ccforward.github.io/rubik/#/" class="duty-card" target="_blank"
                               title="Rubik UI - Rubik UI 是一个基于 Vue.js 2.0&#43; 的开源 UI 组件库，在交互和视觉设计上遵循 Material Design 规范，适用于 PC 端和 mobile 端。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/d3148eda6079f984.png">Rubik
                                    UI
                                </div>
                                <div class="duty-card-des">Rubik UI 是一个基于 Vue.js 2.0&#43; 的开源 UI 组件库，在交互和视觉设计上遵循
                                    Material Design 规范，适用于 PC 端和 mobile 端。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.getuikit.net/" class="duty-card" target="_blank"
                               title="UIKit中文网 - UIkit是YOOtheme团队开发的一款轻量级、模块化的前端框架，可快速构建强大的前端web界面。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/15f6834c3a546326.png">UIKit中文网
                                </div>
                                <div class="duty-card-des">UIkit是YOOtheme团队开发的一款轻量级、模块化的前端框架，可快速构建强大的前端web界面。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://bootflat.github.io/" class="duty-card" target="_blank"
                               title="Bootflat - Bootflat - 基于bootstrap 3.2.0 的扁平化风格的UI组件的开源项目。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/6f63611bb745ca72.png">Bootflat
                                </div>
                                <div class="duty-card-des">Bootflat - 基于bootstrap 3.2.0 的扁平化风格的UI组件的开源项目。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="" class="duty-card" target="_blank"
                               title="BUI - BUI是基于jQuery，兼容KISSY的UI类库，专致于解决后台系统的框架方案。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/df04ed962d511c9c.png">BUI
                                </div>
                                <div class="duty-card-des">BUI是基于jQuery，兼容KISSY的UI类库，专致于解决后台系统的框架方案。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://sui.taobao.org/sui/docs/" class="duty-card" target="_blank"
                               title="SUI - SUI 是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/987490dd9d94d94a.png">SUI
                                </div>
                                <div class="duty-card-des">SUI 是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.zui.sexy/" class="duty-card" target="_blank"
                               title="ZUI - 一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/3cb50940d34e1148.png">ZUI
                                </div>
                                <div class="duty-card-des">一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.pintuer.com/" class="duty-card" target="_blank"
                               title="拼图Pintuer - 拼图是优秀的响应式前端CSS开源框架，国内前端框架先驱及领导者，自动适应手机、平板、电脑等设备，让前端开发像游戏般快乐、简单、灵活、便捷。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/7fea2adec812d6a.jpg">拼图Pintuer
                                </div>
                                <div class="duty-card-des">
                                    拼图是优秀的响应式前端CSS开源框架，国内前端框架先驱及领导者，自动适应手机、平板、电脑等设备，让前端开发像游戏般快乐、简单、灵活、便捷。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://elemental-ui.com/" class="duty-card" target="_blank"
                               title=" Elemental UI - 一个针对 React.js 的灵活的、漂亮的 UI 框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/3bec012098d5c74.png">
                                    Elemental UI
                                </div>
                                <div class="duty-card-des">一个针对 React.js 的灵活的、漂亮的 UI 框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://cloudflare.github.io/cf-ui/" class="duty-card" target="_blank"
                               title="Cf-ui - Cloudflare 开发的一个 Web UI 框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/551643c01180e5f8.png">Cf-ui
                                </div>
                                <div class="duty-card-des">Cloudflare 开发的一个 Web UI 框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://aliqin.github.io/atui/" class="duty-card" target="_blank"
                               title="Atui - 阿里通讯前端部推出的一个基于 Vue.js 2.0 的 UI 组件库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/e2eeeee050bce6.png">Atui
                                </div>
                                <div class="duty-card-des">阿里通讯前端部推出的一个基于 Vue.js 2.0 的 UI 组件库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://adminlte.io/" class="duty-card" target="_blank"
                               title="AdminLTE - 一个非常流行的基于 Bootstrap 3.x 免费后台UI框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/b7c6d2f52a2487c8.png">AdminLTE
                                </div>
                                <div class="duty-card-des">一个非常流行的基于 Bootstrap 3.x 免费后台UI框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.blazeui.com/" class="duty-card" target="_blank"
                               title="Blaze CSS - 开放源码的模块化CSS工具包，为建立网站提供了很好的结构。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/cbcc912d8a9a23fd.png">Blaze
                                    CSS
                                </div>
                                <div class="duty-card-des">开放源码的模块化CSS工具包，为建立网站提供了很好的结构。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-9" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-file-code-o"></i>JS 框架</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://cn.vuejs.org/" class="duty-card" target="_blank"
                               title="Vue.js 中文网 - Vue.js 是一个用于创建 Web 交互界面的库，它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/86c6ca7942dabaf5.png">Vue.js
                                    中文网
                                </div>
                                <div class="duty-card-des">Vue.js 是一个用于创建 Web 交互界面的库，它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://doc.react-china.org/" class="duty-card" target="_blank"
                               title="React.js中文网 - 用于构建用户界面的 JavaScript 库，React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/cdc2d49e875b0915.jpg">React.js中文网
                                </div>
                                <div class="duty-card-des">用于构建用户界面的 JavaScript 库，React 起源于 Facebook 的内部项目，用来架设
                                    Instagram 的网站。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.angularjs.net.cn/" class="duty-card" target="_blank"
                               title="Angular.js中文网 - AngularJS是为了克服HTML在构建应用上的不足而设计的。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/55c0271adefb7aa5.jpg">Angular.js中文网
                                </div>
                                <div class="duty-card-des">AngularJS是为了克服HTML在构建应用上的不足而设计的。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.jquery123.com/" class="duty-card" target="_blank"
                               title="jQuery - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/12c3ebb7fb02ef75.png">jQuery
                                </div>
                                <div class="duty-card-des">jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://docs.kissyui.com/" class="duty-card" target="_blank"
                               title="KISSY - KISSY 是一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/8ec072fa61037f1d.png">KISSY
                                </div>
                                <div class="duty-card-des">KISSY 是一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://eggjs.org/zh-cn/" class="duty-card" target="_blank"
                               title="Egg - 一个用于更好地构建企业应用的框架，内置流程管理，高度可定制，有强大的插件系统。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/67c92aa6384b8fa3.png">Egg
                                </div>
                                <div class="duty-card-des">一个用于更好地构建企业应用的框架，内置流程管理，高度可定制，有强大的插件系统。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://thinkjs.org/" class="duty-card" target="_blank"
                               title="ThinkJS - ThinkJS 是一款使用 ES6/7 特性全新开发的 Node.js MVC 框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/6e9dc02b01e68a9.png">ThinkJS
                                </div>
                                <div class="duty-card-des">ThinkJS 是一款使用 ES6/7 特性全新开发的 Node.js MVC 框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://jslite.io/" class="duty-card" target="_blank"
                               title="JSLite - JSLite是正对现代浏览器的一个主要的兼容jQuery的API简约的JavaScript库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/b22b1071310ebe05.png">JSLite
                                </div>
                                <div class="duty-card-des">JSLite是正对现代浏览器的一个主要的兼容jQuery的API简约的JavaScript库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://d3js.org/" class="duty-card" target="_blank"
                               title="D3 - D3.js是一个基于数据处理文档，针对 HTML 和 SVG 的 JavaScript 可视化库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/37109e4bb67e2d4a.png">D3
                                </div>
                                <div class="duty-card-des">D3.js是一个基于数据处理文档，针对 HTML 和 SVG 的 JavaScript 可视化库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.css88.com/doc/backbone/" class="duty-card" target="_blank"
                               title="Backbone.js - 给你的 JS 应用一些Backbone的模型、视图、集合和事件。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/cf28f4a5ba247e5b.png">Backbone.js
                                </div>
                                <div class="duty-card-des">给你的 JS 应用一些Backbone的模型、视图、集合和事件。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://redom.js.org/" class="duty-card" target="_blank"
                               title="Redom - 一个轻便的创建用户接口的 JavaScript 库，测试覆盖率100&#37;。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/edadbb921d866f26.png">Redom
                                </div>
                                <div class="duty-card-des">一个轻便的创建用户接口的 JavaScript 库，测试覆盖率100&#37;。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-10" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-paper-plane"></i>前端插件</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://layer.layui.com/" class="duty-card" target="_blank"
                               title="Layer - 一个让你想到即可做到的web弹窗/层解决方案。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/ab1b9b49a9e9e2f5.png">Layer
                                </div>
                                <div class="duty-card-des">一个让你想到即可做到的web弹窗/层解决方案。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://lokeshdhakar.com/projects/lightbox2/" class="duty-card" target="_blank"
                               title="Lightbox - 以弹框形式集中展示图片的JavaScript库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/d8926c9541545e85.png">Lightbox
                                </div>
                                <div class="duty-card-des">以弹框形式集中展示图片的JavaScript库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://echarts.baidu.com/" class="duty-card" target="_blank"
                               title="EChart - 百度EFE团队出品的可视化图表插件。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/e1421fa2cf085ffd.png">EChart
                                </div>
                                <div class="duty-card-des">百度EFE团队出品的可视化图表插件。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://kushagragour.in/lab/hint/" class="duty-card" target="_blank"
                               title="Hint.css - 一款非常小巧的提示框效果插件。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/69e2033b5b256c95.png">Hint.css
                                </div>
                                <div class="duty-card-des">一款非常小巧的提示框效果插件。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.swiper.com.cn/" class="duty-card" target="_blank"
                               title="Swiper - Swiper是一个开源、免费强大的纯javascript打造的滑动特效插件，面向手机、平板。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/69204ad264a8286f.jpg">Swiper
                                </div>
                                <div class="duty-card-des">Swiper是一个开源、免费强大的纯javascript打造的滑动特效插件，面向手机、平板。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://msurguy.github.io/background-blur/#" class="duty-card" target="_blank"
                               title="Background-blur - 实用的超轻的跨浏览器的图像模糊 jQuery 插件，基于 SVG 生成，效果很好">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/452a256937ebdf55.jpg">Background-blur
                                </div>
                                <div class="duty-card-des">实用的超轻的跨浏览器的图像模糊 jQuery 插件，基于 SVG 生成，效果很好</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://pawelgrzybek.github.io/siema/" class="duty-card" target="_blank"
                               title="Siema - 轻量级简单的纯 JavaScript 轮播插件，支持触摸手势">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/3c87660e1ef85ab5.jpg">Siema
                                </div>
                                <div class="duty-card-des">轻量级简单的纯 JavaScript 轮播插件，支持触摸手势</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://miromannino.github.io/Justified-Gallery/" class="duty-card" target="_blank"
                               title="Justified Gallery - Justified Gallery 是一个 jQuery 的相册展示插件，图片会自动填满整个页面空间。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/21402b7680e1bb01.jpg">Justified
                                    Gallery
                                </div>
                                <div class="duty-card-des">Justified Gallery 是一个 jQuery 的相册展示插件，图片会自动填满整个页面空间。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://datatables.club/" class="duty-card" target="_blank"
                               title="Datatables - Datatables是一款jquery表格插件，它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/94bfd964ba52a0c3.jpg">Datatables
                                </div>
                                <div class="duty-card-des">Datatables是一款jquery表格插件，它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://validform.rjboy.cn/" class="duty-card" target="_blank"
                               title="Validform - 表单验证插件，一行代码搞定整站的表单验证。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/f1144dbe08e0f5a6.jpg">Validform
                                </div>
                                <div class="duty-card-des">表单验证插件，一行代码搞定整站的表单验证。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://wlog.cn/waterfall/index-zh.html" class="duty-card" target="_blank"
                               title="Waterfall - 一款仿Pinterest网站的响应式无限动态加载图片瀑布流特效jQuery插件">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/b72bfadf9abad6dd.jpg">Waterfall
                                </div>
                                <div class="duty-card-des">一款仿Pinterest网站的响应式无限动态加载图片瀑布流特效jQuery插件</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://stickerjs.cmiscm.com/" class="duty-card" target="_blank"
                               title="Sticker.js - 一款仿贴纸效果插件。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/2119e177856f82fd.jpg">Sticker.js
                                </div>
                                <div class="duty-card-des">一款仿贴纸效果插件。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://alvarotrigo.com/multiScroll/" class="duty-card" target="_blank"
                               title="multiScroll.js - 创建分割的多滚动页面特效插件。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/53d7730f5a05e0d7.jpg">multiScroll.js
                                </div>
                                <div class="duty-card-des">创建分割的多滚动页面特效插件。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://ueditor.baidu.com/website/index.html" class="duty-card" target="_blank"
                               title="UEditor - UEditor是由百度web前端研发部开发所见即所得富文本web编辑器。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/878dde9332c72dae.png">UEditor
                                </div>
                                <div class="duty-card-des">UEditor是由百度web前端研发部开发所见即所得富文本web编辑器。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.tinymce.com/" class="duty-card" target="_blank"
                               title="TinyMCE - 国外一款所见所得富文本web编辑器。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/b7b2bcb6606baaba.png">TinyMCE
                                </div>
                                <div class="duty-card-des">国外一款所见所得富文本web编辑器。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.geetest.com/" class="duty-card" target="_blank"
                               title="极验验证 - 新一代基于行为式验证安全技术的验证码。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/719f577b6a68d4be.jpg">极验验证
                                </div>
                                <div class="duty-card-des">新一代基于行为式验证安全技术的验证码。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.qunee.com/" class="duty-card" target="_blank"
                               title="qunee - 一套基于HTML5的网络图组件。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/7d82d14ea7901279.png">qunee
                                </div>
                                <div class="duty-card-des">一套基于HTML5的网络图组件。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://rubaxa.github.io/Sortable/" class="duty-card" target="_blank"
                               title="Sortable - 一个简约的 JavaScript 库用于在现代浏览器中拖放列表重新排序 ，支持任何JS框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/a4049ec64a5b6b33.jpg">Sortable
                                </div>
                                <div class="duty-card-des">一个简约的 JavaScript 库用于在现代浏览器中拖放列表重新排序 ，支持任何JS框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://blueimp.github.io/jQuery-File-Upload/index.html" class="duty-card"
                               target="_blank"
                               title="jQuery File Upload Plugin - 一个有功能强大的 jQuery 上传组件，支持多文件选择、拖拽上传、验证、图片和多媒体预览等功能。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/9da40e021b3b1658.png">jQuery
                                    File Upload Plugin
                                </div>
                                <div class="duty-card-des">一个有功能强大的 jQuery 上传组件，支持多文件选择、拖拽上传、验证、图片和多媒体预览等功能。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.hcharts.cn/" class="duty-card" target="_blank"
                               title="Highcharts - Highcharts 是一个用纯JavaScript编写的一个图表库，兼容IE6&#43;">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/90ff2f9b2f004610.png">Highcharts
                                </div>
                                <div class="duty-card-des">Highcharts 是一个用纯JavaScript编写的一个图表库，兼容IE6&#43;</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://interactjs.io/" class="duty-card" target="_blank"
                               title="Interact.js - interact.js是一个随意改变形状插件，,它非常强大的，灵活拖放，改变大小，支持现代浏览器的多点触摸手势，基于SVG的运用，能运行在包括在IE8&#43;的浏览器">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/894765d8626032d.png">Interact.js
                                </div>
                                <div class="duty-card-des">
                                    interact.js是一个随意改变形状插件，,它非常强大的，灵活拖放，改变大小，支持现代浏览器的多点触摸手势，基于SVG的运用，能运行在包括在IE8&#43;的浏览器
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/ftlabs/fastclick" class="duty-card" target="_blank"
                               title="FastClick - 解决移动端浏览器上的点击事件延迟">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2019/5/f8a671c86b3a9eee.jpg">FastClick
                                </div>
                                <div class="duty-card-des">解决移动端浏览器上的点击事件延迟</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-11" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-tablet"></i>移动框架</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://ionicframework.com.cn/" class="duty-card" target="_blank"
                               title="Ionic - 领先的HTML5 移动开发框架和 SDK，利用你所熟知的web 技术构建难以置信的移动应用，是AngularJS最好的朋友。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/1a76f4ded308fd25.jpg">Ionic
                                </div>
                                <div class="duty-card-des">领先的HTML5 移动开发框架和 SDK，利用你所熟知的web
                                    技术构建难以置信的移动应用，是AngularJS最好的朋友。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://weex-project.io/cn/index.html" class="duty-card" target="_blank"
                               title="Weex - 阿里推出的跨平台的移动端开发框架，具有轻量级、可扩展和高性能的特点。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/d7378a39a8abcb3d.png">Weex
                                </div>
                                <div class="duty-card-des">阿里推出的跨平台的移动端开发框架，具有轻量级、可扩展和高性能的特点。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://framework7.taobao.org/" class="duty-card" target="_blank"
                               title="Framework7 - 功能强大的创建 iOS & Android APP 的 HTML 框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/5d3116c4e7f2726d.png">Framework7
                                </div>
                                <div class="duty-card-des">功能强大的创建 iOS & Android APP 的 HTML 框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://dev.dcloud.net.cn/mui/" class="duty-card" target="_blank"
                               title="Mui - 最接近原生APP体验的高性能前端框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/5b778024286f5735.png">Mui
                                </div>
                                <div class="duty-card-des">最接近原生APP体验的高性能前端框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://facebook.github.io/react-native/" class="duty-card" target="_blank"
                               title="React-native - Facebook推出的一个基于 React 的创建原生APP的框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/19985b4a90bd7227.jpg">React-native
                                </div>
                                <div class="duty-card-des">Facebook推出的一个基于 React 的创建原生APP的框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://jquerymobile.com/" class="duty-card" target="_blank"
                               title="jQuery Mobile - jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/78ee8c73968a1921.png">jQuery
                                    Mobile
                                </div>
                                <div class="duty-card-des">jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://m.sui.taobao.org/" class="duty-card" target="_blank"
                               title="SUI Mobile - 淘宝的SUI是一款不错的移动端UI库，轻量，小巧且精美。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/4532aa5bed665488.png">SUI
                                    Mobile
                                </div>
                                <div class="duty-card-des">淘宝的SUI是一款不错的移动端UI库，轻量，小巧且精美。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://jqweui.cn/" class="duty-card" target="_blank"
                               title="jQuery WeUI - 专为微信公众账号开发而设计的一个简洁而强大的UI库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/3fb09235f1bc9663.png">jQuery
                                    WeUI
                                </div>
                                <div class="duty-card-des">专为微信公众账号开发而设计的一个简洁而强大的UI库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://zeptojs.com/" class="duty-card" target="_blank"
                               title="Zepto.js - Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，更偏向于移动端。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/981b2fb1a2e3d658.png">Zepto.js
                                </div>
                                <div class="duty-card-des">Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，更偏向于移动端。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://nwjs.io/" class="duty-card" target="_blank"
                               title="NW.js - 轻量级跨平台桌面应用开发框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/75ded413a5dae85a.png">NW.js
                                </div>
                                <div class="duty-card-des">轻量级跨平台桌面应用开发框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://vux.li/#/" class="duty-card" target="_blank"
                               title="Vux - 基于 WeUI 和 Vue.js 的 移动端 UI 组件库，提供丰富的组件满足移动端&#40;微信&#41;页面常用业务需求。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/2c30d7df1b4abe17.jpg">Vux
                                </div>
                                <div class="duty-card-des">基于 WeUI 和 Vue.js 的 移动端 UI 组件库，提供丰富的组件满足移动端&#40;微信&#41;页面常用业务需求。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/AlloyTeam/Mars" class="duty-card" target="_blank"
                               title="Mars - 腾讯移动Web前端知识库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/6e941d5d87f1f53a.jpg">Mars
                                </div>
                                <div class="duty-card-des">腾讯移动Web前端知识库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://mint-ui.github.io/#!/zh-cn" class="duty-card" target="_blank"
                               title="Mint UI - 基于 Vue.js 的移动端组件库，包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/3c057fbe9b98f0ad.png">Mint
                                    UI
                                </div>
                                <div class="duty-card-des">基于 Vue.js 的移动端组件库，包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://onsen.io/" class="duty-card" target="_blank"
                               title="Onsen UI - 用来构建混合移动端APP的 HTML5 UI 框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/c02887cd81aeee4c.png">Onsen
                                    UI
                                </div>
                                <div class="duty-card-des">用来构建混合移动端APP的 HTML5 UI 框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://mozbrick.github.io/" class="duty-card" target="_blank"
                               title="Brick - Brick是为易于快速构建Web应用程序UI设计的UI组件的集合。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/2419c3f581731d47.jpg">Brick
                                </div>
                                <div class="duty-card-des">Brick是为易于快速构建Web应用程序UI设计的UI组件的集合。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/matthewhudson/current-device" class="duty-card" target="_blank"
                               title="Device.js - 检测设备平台、操作系统的Javascript库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/fb822e066f4f0aba.jpg">Device.js
                                </div>
                                <div class="duty-card-des">检测设备平台、操作系统的Javascript库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/soyjavi/QuoJS" class="duty-card" target="_blank"
                               title="Quojs - 针对移动设备的微型JavaScript库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/9fcf918f582e9c2.jpg">Quojs
                                </div>
                                <div class="duty-card-des">针对移动设备的微型JavaScript库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/fooplugins/FooTable" class="duty-card" target="_blank"
                               title="Footable - FooTable是一个jQuery插件旨在使更小的设备上的HTML表格看起来真棒，无论你可能有多少列数据。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/85cc33931ed2dfeb.png">Footable
                                </div>
                                <div class="duty-card-des">FooTable是一个jQuery插件旨在使更小的设备上的HTML表格看起来真棒，无论你可能有多少列数据。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://kornel.ski/slip/" class="duty-card" target="_blank"
                               title="Slip - 通过滑动和拖动手势操作列表的 UI 库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/cc43d9433cde0001.png">Slip
                                </div>
                                <div class="duty-card-des">通过滑动和拖动手势操作列表的 UI 库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://getmobicss.com/" class="duty-card" target="_blank"
                               title="Mobi.css - 一个轻量级的，可扩展的，移动优先的CSS框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/e28d6af9d5c66f45.png">Mobi.css
                                </div>
                                <div class="duty-card-des">一个轻量级的，可扩展的，移动优先的CSS框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://justspamjustin.github.io/junior/#home" class="duty-card" target="_blank"
                               title="Junior - 用于构建具有原生外观的HTML5移动应用的前端框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/73b97806d1360d7.png">Junior
                                </div>
                                <div class="duty-card-des">用于构建具有原生外观的HTML5移动应用的前端框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://alloyteam.github.io/AlloyFinger/" class="duty-card" target="_blank"
                               title="Alloyfinger - 腾讯Web前端团队推出的轻量级的多点触控手势库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/330ba7fcf9f5dd6.png">Alloyfinger
                                </div>
                                <div class="duty-card-des">腾讯Web前端团队推出的轻量级的多点触控手势库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://montagestudio.com/montagejs/" class="duty-card" target="_blank"
                               title="MontageJS - MontageJS是一个现代化的前端HTML5框架，支持快速创建单页应用程序。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/94c947c520dbec02.png">MontageJS
                                </div>
                                <div class="duty-card-des">MontageJS是一个现代化的前端HTML5框架，支持快速创建单页应用程序。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.muse-ui.org/#/index" class="duty-card" target="_blank"
                               title="Muse-UI - 基于 Vue 2.0 和 Material Design 的 UI 组件库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/740b0d056417deed.png">Muse-UI
                                </div>
                                <div class="duty-card-des">基于 Vue 2.0 和 Material Design 的 UI 组件库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/fex-team/GMU" class="duty-card" target="_blank"
                               title="GMU - 百度FEX团队推出的基于zepto的ui组件库，适用于移动端。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/a490e04888531e83.png">GMU
                                </div>
                                <div class="duty-card-des">百度FEX团队推出的基于zepto的ui组件库，适用于移动端。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://mobiscroll.com/" class="duty-card" target="_blank"
                               title="Mobiscroll - 用于触摸设备&#65288;如智能手机和平板电脑&#65289;的可定制移动UI库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/16a3c916a00d6342.png">Mobiscroll
                                </div>
                                <div class="duty-card-des">用于触摸设备&#65288;如智能手机和平板电脑&#65289;的可定制移动UI库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://pep.briangonzalez.org/" class="duty-card" target="_blank"
                               title="Jquery.pep.js - jquery.pep.js是一个轻量级的jQuery插件，它可以将任何DOM元素成为拖动对象。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/213c412b800ad86f.jpg">Jquery.pep.js
                                </div>
                                <div class="duty-card-des">jquery.pep.js是一个轻量级的jQuery插件，它可以将任何DOM元素成为拖动对象。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://zingchart.github.io/zingtouch/" class="duty-card" target="_blank"
                               title="Zingtouch - 一个 JavaScript 触摸手势检测库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/260715e32390f794.png">Zingtouch
                                </div>
                                <div class="duty-card-des">一个 JavaScript 触摸手势检测库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/panteng/wechat-h5-boilerplate" class="duty-card" target="_blank"
                               title="Wechat-h5-boilerplate - 为腾讯微信优化的H5动效模板，帮助你快速构建全屏滚动型H5页面。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/54e1f0b1077703ea.png">Wechat-h5-boilerplate
                                </div>
                                <div class="duty-card-des">为腾讯微信优化的H5动效模板，帮助你快速构建全屏滚动型H5页面。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://chrisyee.ca/pushy/" class="duty-card" target="_blank"
                               title="Pushy - Pushy是一种响应式画布导航菜单，使用CSS变换和转换。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/17af7daf5f7bb5c6.jpg">Pushy
                                </div>
                                <div class="duty-card-des">Pushy是一种响应式画布导航菜单，使用CSS变换和转换。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.mobilebone.org/" class="duty-card" target="_blank"
                               title="Mobilebone - mobile移动端，PC桌面端页面无刷新过场JS骨架，简单、专注&#65281;">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/af6c276d3dbde17f.jpg">Mobilebone
                                </div>
                                <div class="duty-card-des">mobile移动端，PC桌面端页面无刷新过场JS骨架，简单、专注&#65281;</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://wangdahoo.github.io/vonic-documents/#/" class="duty-card" target="_blank"
                               title="Vonic - Vonic 是一个基于 Vue.js 和 Ionic CSS 样式的 UI 框架，用于快速构建移动端单页应用。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/162839c3c54978dd.jpg">Vonic
                                </div>
                                <div class="duty-card-des">Vonic 是一个基于 Vue.js 和 Ionic CSS 样式的 UI 框架，用于快速构建移动端单页应用。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://mobile.ant.design/index-cn" class="duty-card" target="_blank"
                               title="Ant Design Mobile - 一个基于 Preact / React / React Native 的 UI 组件库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/d3c64881704c8b37.jpg">Ant
                                    Design Mobile
                                </div>
                                <div class="duty-card-des">一个基于 Preact / React / React Native 的 UI 组件库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/lzxb/flex.css/blob/master/docs/zh-ch.md" class="duty-card"
                               target="_blank" title="Flex.css - flex.css is 是一个声明式的布局框架，能够兼容多个 MVVM框架和浏览器。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/73f53d28ebba464f.jpg">Flex.css
                                </div>
                                <div class="duty-card-des">flex.css is 是一个声明式的布局框架，能够兼容多个 MVVM框架和浏览器。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://tinynav.com/" class="duty-card" target="_blank"
                               title="Tinynav.js - 一个迷你响应式导航插件，大小只有452B。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/5a7fa2e4794fd19d.jpg">Tinynav.js
                                </div>
                                <div class="duty-card-des">一个迷你响应式导航插件，大小只有452B。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://vycool.com/Jingle/" class="duty-card" target="_blank"
                               title="Jingle - Jingle是一个基于html5、css3开发轻量级的移动webapp 框架，提供一些基本交互方式，帮助您更方便的开发移动应用。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/adaa152cd2f01e6a.jpg">Jingle
                                </div>
                                <div class="duty-card-des">Jingle是一个基于html5、css3开发轻量级的移动webapp
                                    框架，提供一些基本交互方式，帮助您更方便的开发移动应用。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/benmajor/jQuery-Touch-Events" class="duty-card" target="_blank"
                               title="jQuery Touch Events - Touch-Events 会自动识别由触摸及点击引起的事件，此插件能够帮助单一环境的 jQuery 移动应用环境的开发。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/b097590b85e18ad7.jpg">jQuery
                                    Touch Events
                                </div>
                                <div class="duty-card-des">Touch-Events 会自动识别由触摸及点击引起的事件，此插件能够帮助单一环境的 jQuery
                                    移动应用环境的开发。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.auicss.com/" class="duty-card" target="_blank"
                               title="AUI - 移动端UI快速布局解决方案&#65288;APICloud UI框架&#65289;。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/39da5547971c45b8.png">AUI
                                </div>
                                <div class="duty-card-des">移动端UI快速布局解决方案&#65288;APICloud UI框架&#65289;。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.myronliu.com/vue-carbon/#!/" class="duty-card" target="_blank"
                               title="Vue Carbon -  一个基于 Vue 开发 material design 风格的移动端 UI 库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/71647b8212a2f97.jpg">Vue
                                    Carbon
                                </div>
                                <div class="duty-card-des"> 一个基于 Vue 开发 material design 风格的移动端 UI 库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://frozenui.github.io/" class="duty-card" target="_blank"
                               title="Frozen UI - FrozenUI 是一套基于移动端的UI库 轻量、精美、遵从手机 QQ 设计规范。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/86a9f3aac0a90390.png">Frozen
                                    UI
                                </div>
                                <div class="duty-card-des">FrozenUI 是一套基于移动端的UI库 轻量、精美、遵从手机 QQ 设计规范。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-12" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-hourglass-2"></i>预处理器</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://lesscss.cn/" class="duty-card" target="_blank"
                               title="Less 中文网 - Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/54c28ce68ab1605e.png">Less
                                    中文网
                                </div>
                                <div class="duty-card-des">Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://coffeescript.org/" class="duty-card" target="_blank"
                               title="Coffeescript - CoffeeScript 是一门编译到 JavaScript 的小巧语言。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/188957c62ead0976.png">Coffeescript
                                </div>
                                <div class="duty-card-des">CoffeeScript 是一门编译到 JavaScript 的小巧语言。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.sass.hk/" class="duty-card" target="_blank"
                               title="Sass中文网 - 世界上最成熟、最稳定、最强大的专业级CSS扩展语言&#65281;">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/59ca8e6b664df2fe.png">Sass中文网
                                </div>
                                <div class="duty-card-des">世界上最成熟、最稳定、最强大的专业级CSS扩展语言&#65281;</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://stylus-lang.com/" class="duty-card" target="_blank"
                               title="Stylus - 富有表现力的、动态的、健壮的CSS">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/1c2270db6eac446e.png">Stylus
                                </div>
                                <div class="duty-card-des">富有表现力的、动态的、健壮的CSS</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/css-modules/css-modules" class="duty-card" target="_blank"
                               title="CSS Modules - 它不是将 CSS 改造成编程语言，而是功能很单纯，只加入了局部作用域和模块依赖">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/90fc45796a8fdfae.png">CSS
                                    Modules
                                </div>
                                <div class="duty-card-des">它不是将 CSS 改造成编程语言，而是功能很单纯，只加入了局部作用域和模块依赖</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.npmjs.com/package/node-sass" class="duty-card" target="_blank"
                               title="Node-sass - node-sass提供了一个nodejs到libsass的桥梁.libsass是广受欢迎的css预处理器sass的c版本">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/7eb5a94318c997e.png">Node-sass
                                </div>
                                <div class="duty-card-des">
                                    node-sass提供了一个nodejs到libsass的桥梁.libsass是广受欢迎的css预处理器sass的c版本
                                </div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-13" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-font"></i>字体图标</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.iconfont.cn/" class="duty-card" target="_blank"
                               title="Iconfont - 阿里妈妈MUX打造的图标库，是国内功能很强大且图标内容很丰富的矢量图标库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/b7c91eb2fa151856.jpg">Iconfont
                                </div>
                                <div class="duty-card-des">阿里妈妈MUX打造的图标库，是国内功能很强大且图标内容很丰富的矢量图标库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://fontawesome.dashgame.com/" class="duty-card" target="_blank"
                               title="Font Awesome - 一款风靡全球的图标字体库和CSS框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/33003a86650c5076.png">Font
                                    Awesome
                                </div>
                                <div class="duty-card-des">一款风靡全球的图标字体库和CSS框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://pictonic.co/" class="duty-card" target="_blank"
                               title="pictonic - 国外一个免费字体图标库，有362个免费字体图标。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/984e46d641a6992.png">pictonic
                                </div>
                                <div class="duty-card-des">国外一个免费字体图标库，有362个免费字体图标。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://icomoon.io/" class="duty-card" target="_blank"
                               title="IcoMoon - 免费开源的字体图标库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/7a97ae13d984e2fe.png">IcoMoon
                                </div>
                                <div class="duty-card-des">免费开源的字体图标库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://mfglabs.github.io/mfglabs-iconset/" class="duty-card" target="_blank"
                               title="MFG Labs icon set - 免费字体图标">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/b5d08b70911c997e.png">MFG
                                    Labs icon set
                                </div>
                                <div class="duty-card-des">免费字体图标</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="" class="duty-card" target="_blank" title="Ligature Symbols - 国外一个免费开源字体图标库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/e20d9b61198e9b12.png">Ligature
                                    Symbols
                                </div>
                                <div class="duty-card-des">国外一个免费开源字体图标库。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-14" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-cogs"></i>构建工具</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.gulpjs.com.cn/" class="duty-card" target="_blank"
                               title="Gulp中文网 - Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/8e1569f52cc6ec7a.jpg">Gulp中文网
                                </div>
                                <div class="duty-card-des">Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.gruntjs.net/" class="duty-card" target="_blank"
                               title="Grunt中文网 - Grunt是基于Node.js的项目构建工具，它可以自动运行你所设定的任务。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/114b0410708fd7e4.png">Grunt中文网
                                </div>
                                <div class="duty-card-des">Grunt是基于Node.js的项目构建工具，它可以自动运行你所设定的任务。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.webpackjs.com/" class="duty-card" target="_blank"
                               title="Webpack中文网 - Webpack 是一个前端资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/1ffbcba2a33da8ce.png">Webpack中文网
                                </div>
                                <div class="duty-card-des">Webpack
                                    是一个前端资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="" class="duty-card" target="_blank" title="Yeoman - Yeoman提供了自动化开发流程的一整套工具。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/6460bf2791072a40.png">Yeoman
                                </div>
                                <div class="duty-card-des">Yeoman提供了自动化开发流程的一整套工具。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://fex-team.github.io/fis3/" class="duty-card" target="_blank"
                               title="Fis3 - FIS3 面向前端的工程构建系统。解决前端工程中性能优化、资源加载等问题。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/4befa414bad19100.png">Fis3
                                </div>
                                <div class="duty-card-des">FIS3 面向前端的工程构建系统。解决前端工程中性能优化、资源加载等问题。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://weflow.io/" class="duty-card" target="_blank"
                               title="Weflow - 微信团队推出的跨终端的前端工作流开发工具。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/ce953393246a485a.png">Weflow
                                </div>
                                <div class="duty-card-des">微信团队推出的跨终端的前端工作流开发工具。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/facebook/create-react-app" class="duty-card" target="_blank"
                               title="create-react-app - 无需配置文件快速创建 React 应用">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/f514e561ff94b89d.png">create-react-app
                                </div>
                                <div class="duty-card-des">无需配置文件快速创建 React 应用</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://parceljs.org/" class="duty-card" target="_blank"
                               title="PARCEL中文网 - 一个非常快速、零配置的 WEB 应用打包工具。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/286e5da9c890b577.png">PARCEL中文网
                                </div>
                                <div class="duty-card-des">一个非常快速、零配置的 WEB 应用打包工具。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://brunch.io/" class="duty-card" target="_blank"
                               title="Brunch - 快速的前端Web应用程序构建工具，具有简单的声明性配置，用于快速开发的无缝增量编译。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/5e3ba7e9ebd23633.png">Brunch
                                </div>
                                <div class="duty-card-des">快速的前端Web应用程序构建工具，具有简单的声明性配置，用于快速开发的无缝增量编译。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://elemefe.github.io/cooking/" class="duty-card" target="_blank"
                               title="cooking - 更易上手的前端构建工具，不仅简单而且高效。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/883121e9d23b8b63.png">cooking
                                </div>
                                <div class="duty-card-des">更易上手的前端构建工具，不仅简单而且高效。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/developit/microbundle" class="duty-card" target="_blank"
                               title="Microbundle - 零配置的模块打包器。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/8526156af505b305.png">Microbundle
                                </div>
                                <div class="duty-card-des">零配置的模块打包器。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://slushjs.github.io/generators/#/" class="duty-card" target="_blank"
                               title="slush - 流式脚手架系统 - 用 Gulp 替换了 Yeoman">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/9bd22428b357267e.png">slush
                                </div>
                                <div class="duty-card-des">流式脚手架系统 - 用 Gulp 替换了 Yeoman</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://enderjs.com/" class="duty-card" target="_blank"
                               title="Ender - 一款全功能的浏览器软件包管理器。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/e44802356ceec887.jpg">Ender
                                </div>
                                <div class="duty-card-des">一款全功能的浏览器软件包管理器。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/Tencent/tmt-workflow" class="duty-card" target="_blank"
                               title="tmt-workflow - 一个基于 Gulp&#40;v4.0&#41;、高效、跨平台&#40;Mac & Win&#41;、可定制的前端工作流程。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/10585e2b11e328f8.jpg">tmt-workflow
                                </div>
                                <div class="duty-card-des">一个基于 Gulp&#40;v4.0&#41;、高效、跨平台&#40;Mac &
                                    Win&#41;、可定制的前端工作流程。
                                </div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-15" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-cubes"></i>模块加载</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://requirejs.org/" class="duty-card" target="_blank"
                               title="Requirejs - RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/7b67ded8d2f4da06.png">Requirejs
                                </div>
                                <div class="duty-card-des">RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://seajs.org/" class="duty-card" target="_blank"
                               title="Seajs - SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/e14b70237886b582.png">Seajs
                                </div>
                                <div class="duty-card-des">SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.rollupjs.com/" class="duty-card" target="_blank"
                               title="Rollup中文文档 - Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/c24579e85cda30d0.jpg">Rollup中文文档
                                </div>
                                <div class="duty-card-des">Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://imagesloaded.desandro.com/" class="duty-card" target="_blank"
                               title="Imagesloaded - imagesLoaded是一个用于来检测网页中的图片是否载入完成JavaScript工具库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/3b474a9eef24f736.png">Imagesloaded
                                </div>
                                <div class="duty-card-des">imagesLoaded是一个用于来检测网页中的图片是否载入完成JavaScript工具库。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://moutjs.com/" class="duty-card" target="_blank"
                               title="Mout - MOUT是模块化JavaScript实用程序的集合，可以在浏览器中用作AMD模块或node.js。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/8984d8b363a8f1b0.png">Mout
                                </div>
                                <div class="duty-card-des">MOUT是模块化JavaScript实用程序的集合，可以在浏览器中用作AMD模块或node.js。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://nodejs.cn/" class="duty-card" target="_blank"
                               title="Nodejs中文网 - Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/d12795761d90c30e.png">Nodejs中文网
                                </div>
                                <div class="duty-card-des">Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/systemjs/systemjs" class="duty-card" target="_blank"
                               title="SystemJS - 可配置模块加载器，在浏览器和NodeJS中启用动态ES模块工作流程。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/6f9277421dce134c.jpg">SystemJS
                                </div>
                                <div class="duty-card-des">可配置模块加载器，在浏览器和NodeJS中启用动态ES模块工作流程。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/umdjs/umd" class="duty-card" target="_blank"
                               title="UMD - 适用于任何地方的JavaScript模块的UMD&#65288;通用模块定义&#65289;模式。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/ed99ddd565e5f3ff.jpg">UMD
                                </div>
                                <div class="duty-card-des">适用于任何地方的JavaScript模块的UMD&#65288;通用模块定义&#65289;模式。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://vue-loader.vuejs.org/" class="duty-card" target="_blank"
                               title="Vue Loader - Vue.js 组件的 Webpack loader。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/92526ba7582b26ef.jpg">Vue
                                    Loader
                                </div>
                                <div class="duty-card-des">Vue.js 组件的 Webpack loader。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/getify/LABjs" class="duty-card" target="_blank"
                               title="LABjs - LABjs是一个动态脚本加载器，旨在用一个灵活的，性能优化的替代API来替代使用丑陋的，非高性能的&#60;script&#62;标签。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/e6efef43761b1347.jpg">LABjs
                                </div>
                                <div class="duty-card-des">LABjs是一个动态脚本加载器，旨在用一个灵活的，性能优化的替代API来替代使用丑陋的，非高性能的&#60;script&#62;标签。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/cujojs/curl" class="duty-card" target="_blank"
                               title="curl - curl.js 是一个轻量级，快速，可扩展的模块加载器，用来处理AMD，CommonJS模块/ 1.1，CSS，HTML文本，和传统的脚本。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/8194d5e36a2150ab.png">curl
                                </div>
                                <div class="duty-card-des">curl.js 是一个轻量级，快速，可扩展的模块加载器，用来处理AMD，CommonJS模块/
                                    1.1，CSS，HTML文本，和传统的脚本。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/ecomfe/esl" class="duty-card" target="_blank"
                               title="ESL - ESL是一个浏览器端、符合AMD的标准加载器，适合用于现代Web浏览器端应用的入口与模块管理。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/f300d38ac03e030b.jpg">ESL
                                </div>
                                <div class="duty-card-des">ESL是一个浏览器端、符合AMD的标准加载器，适合用于现代Web浏览器端应用的入口与模块管理。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-16" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-briefcase"></i>包管理器</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.npmjs.com/" class="duty-card" target="_blank"
                               title="Npm - npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/464c9f11c20e8152.png">Npm
                                </div>
                                <div class="duty-card-des">npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://yarnpkg.com/zh-Hans/" class="duty-card" target="_blank"
                               title="Yarn - Yarn 对你的代码来说是一个包管理器， 你可以通过它使用全世界开发者的代码，或者分享自己的代码。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/8e320f7a18835952.png">Yarn
                                </div>
                                <div class="duty-card-des">Yarn 对你的代码来说是一个包管理器， 你可以通过它使用全世界开发者的代码，或者分享自己的代码。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://bower.io/" class="duty-card" target="_blank"
                               title="Bower - bower Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/d75c76a31800d7d2.png">Bower
                                </div>
                                <div class="duty-card-des">bower
                                    Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://browserify.org/" class="duty-card" target="_blank"
                               title="Browserify - Browserify是一个浏览器端代码模块化工具简介服务器端NodeJS自带模块功能。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/cd9cfcd74c49a2ca.png">Browserify
                                </div>
                                <div class="duty-card-des">Browserify是一个浏览器端代码模块化工具简介服务器端NodeJS自带模块功能。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://jspm.io/" class="duty-card" target="_blank"
                               title="Jspm-cli - JSPM是基于SystemJS的Javascript包 package管理器，基于动态的ES6模块加载器之上构建。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/d35af329ec4440a6.png">Jspm-cli
                                </div>
                                <div class="duty-card-des">JSPM是基于SystemJS的Javascript包 package管理器，基于动态的ES6模块加载器之上构建。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://gugel.io/ied/" class="duty-card" target="_blank"
                               title="IED - 像npm一样，但速度更快 - 是Node的替代软件包管理器。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/b4819b1c59a8e80e.png">IED
                                </div>
                                <div class="duty-card-des">像npm一样，但速度更快 - 是Node的替代软件包管理器。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://lernajs.io/" class="duty-card" target="_blank"
                               title="Lerna - 一个用于管理有多个包的 JavaScript 项目的工具。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/e885ae15b963cdef.png">Lerna
                                </div>
                                <div class="duty-card-des">一个用于管理有多个包的 JavaScript 项目的工具。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/componentjs/component" class="duty-card" target="_blank"
                               title="component - 前端程序包管理器和用于模块化Web应用程序的构建工具。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/1da3e70c98ab8ecf.png">component
                                </div>
                                <div class="duty-card-des">前端程序包管理器和用于模块化Web应用程序的构建工具。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://duojs.org/" class="duty-card" target="_blank"
                               title="DUO - Duo是下一代软件包管理器，融合了Component，Browserify和Go的最佳创意，使组织和编写前端代码快速而轻松。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/43a22d82a37915ed.png">DUO
                                </div>
                                <div class="duty-card-des">
                                    Duo是下一代软件包管理器，融合了Component，Browserify和Go的最佳创意，使组织和编写前端代码快速而轻松。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://fuse-box.org/" class="duty-card" target="_blank"
                               title="FuseBox - FuseBox是一款快速的捆绑器/模块加载器，您可以以毫秒为单位测量构建时间。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/432dc96bce70f5c4.png">FuseBox
                                </div>
                                <div class="duty-card-des">FuseBox是一款快速的捆绑器/模块加载器，您可以以毫秒为单位测量构建时间。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.jamjs.org/" class="duty-card" target="_blank"
                               title="Jam - JavaScript包管理器 - 使用以浏览器为中心并与RequireJS兼容的存储库。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/f1a29508596e5b06.png">Jam
                                </div>
                                <div class="duty-card-des">JavaScript包管理器 - 使用以浏览器为中心并与RequireJS兼容的存储库。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-17" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-dashboard"></i>模板引擎</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://olado.github.io/doT/" class="duty-card" target="_blank"
                               title="doT.js - dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/6488a05c9aa9b2a8.png">doT.js
                                </div>
                                <div class="duty-card-des">dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://jade-lang.com/" class="duty-card" target="_blank"
                               title="JADE LANGUAGE - Jade是一款基于haml的html模版引擎,采用JavaScript实现,可以方便地在Node.js、Yeoman等框架中使用。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/2f7e25997d6c3aab.png">JADE
                                    LANGUAGE
                                </div>
                                <div class="duty-card-des">
                                    Jade是一款基于haml的html模版引擎,采用JavaScript实现,可以方便地在Node.js、Yeoman等框架中使用。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://handlebarsjs.com/" class="duty-card" target="_blank"
                               title="Handlebars.js - Handlebars.js是一个Javascript客户端的模板引擎&#40;它也能用于服务器端&#41;。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/432e538937aacab.png">Handlebars.js
                                </div>
                                <div class="duty-card-des">Handlebars.js是一个Javascript客户端的模板引擎&#40;它也能用于服务器端&#41;。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://aui.github.io/art-template/zh-cn/index.html" class="duty-card"
                               target="_blank"
                               title="ART-TEMPLATE - artTemplate是新一代javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能极限。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/fc479602b2bb658b.png">ART-TEMPLATE
                                </div>
                                <div class="duty-card-des">artTemplate是新一代javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript
                                    性能极限。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://twitter.github.io/hogan.js/" class="duty-card" target="_blank"
                               title="Hogan.js - Hogan是一个非常简单的模板引擎,可以把它理解成Mustuche语法的编译器。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/76011fabf0120bfb.png">Hogan.js
                                </div>
                                <div class="duty-card-des">Hogan是一个非常简单的模板引擎,可以把它理解成Mustuche语法的编译器。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="" class="duty-card" target="_blank"
                               title="Nunjucks - Nunjucks 是一个更复杂的 JavaScript 模板引擎，提供丰富的语言特性和块继承、自动转移、宏和异步控制等等。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/3/392155e5e4dfc693.png">Nunjucks
                                </div>
                                <div class="duty-card-des">Nunjucks 是一个更复杂的 JavaScript
                                    模板引擎，提供丰富的语言特性和块继承、自动转移、宏和异步控制等等。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://pugjs.org/api/getting-started.html" class="duty-card" target="_blank"
                               title="Pug - Pug 是一款强大，优雅，功能丰富的 Node.js 模板引擎。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/820da0a408217999.png">Pug
                                </div>
                                <div class="duty-card-des">Pug 是一款强大，优雅，功能丰富的 Node.js 模板引擎。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/janl/mustache.js" class="duty-card" target="_blank"
                               title="mustache.js - mustache.js是一种无逻辑模板语法，它可以用于HTML，配置文件，源代码 - 任何东西。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/782a521ace522986.jpg">mustache.js
                                </div>
                                <div class="duty-card-des">mustache.js是一种无逻辑模板语法，它可以用于HTML，配置文件，源代码 - 任何东西。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/tj/ejs" class="duty-card" target="_blank"
                               title="EJS - 应用于 Node.js 的嵌入式 JavaScript 模板引擎。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/e2246164b0d47c59.jpg">EJS
                                </div>
                                <div class="duty-card-des">应用于 Node.js 的嵌入式 JavaScript 模板引擎。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/paularmstrong/swig" class="duty-card" target="_blank"
                               title="Swig - Swig是一个非常棒的 Django/Jinja-like模板引擎，用于node.js。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/b7ffa00b7e97f86a.jpg">Swig
                                </div>
                                <div class="duty-card-des">Swig是一个非常棒的 Django/Jinja-like模板引擎，用于node.js。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://rivetsjs.com/" class="duty-card" target="_blank"
                               title="Rivets.js - 轻量级和强大的数据绑定&#43;模板解决方案，用于构建现代Web应用程序。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/86c9aa6f81d2555f.jpg">Rivets.js
                                </div>
                                <div class="duty-card-des">轻量级和强大的数据绑定&#43;模板解决方案，用于构建现代Web应用程序。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.dustjs.com/" class="duty-card" target="_blank"
                               title="Dust.js - 针对浏览器和服务器的异步Javascript模板。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/3cef62fbbfcbe20b.jpg">Dust.js
                                </div>
                                <div class="duty-card-des">针对浏览器和服务器的异步Javascript模板。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/tj/consolidate.js" class="duty-card" target="_blank"
                               title="Consolidate.js - Node.js 模板引擎的集合。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/1035791f1fc099eb.jpg">Consolidate.js
                                </div>
                                <div class="duty-card-des">Node.js 模板引擎的集合。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/Polymer/lit-html" class="duty-card" target="_blank"
                               title="lit-html - JavaScript 中写 HTML 的模板引擎">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/5cf6f57ce0d251c2.png">lit-html
                                </div>
                                <div class="duty-card-des">JavaScript 中写 HTML 的模板引擎</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-18" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-gamepad"></i>游戏引擎</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.egret.com/" class="duty-card" target="_blank"
                               title="白鹭引擎 - 白鹭引擎-Egret是一套HTML5游戏开发解决方案。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/500d798ec5ca83cc.png">白鹭引擎
                                </div>
                                <div class="duty-card-des">白鹭引擎-Egret是一套HTML5游戏开发解决方案。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://createjs.com/" class="duty-card" target="_blank"
                               title="CreateJS - 基于HTML5的一套模块化的库和工具共同工作或独立使丰富的交互式内容的开放式Web技术。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/d7bd8b5faac198de.png">CreateJS
                                </div>
                                <div class="duty-card-des">基于HTML5的一套模块化的库和工具共同工作或独立使丰富的交互式内容的开放式Web技术。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://phaser.io/" class="duty-card" target="_blank"
                               title="PhaserJS - Phaser是一款免费开源的PC端和移动端HTML5游戏框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/f76172980704e16c.png">PhaserJS
                                </div>
                                <div class="duty-card-des">Phaser是一款免费开源的PC端和移动端HTML5游戏框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://threejs.org/" class="duty-card" target="_blank"
                               title="ThreeJS - Three.js是当下最流行的网页3D渲染JS引擎,其主要是对WebGL编程以面向对象方式进行的封装。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/a815f14260c320ec.png">ThreeJS
                                </div>
                                <div class="duty-card-des">Three.js是当下最流行的网页3D渲染JS引擎,其主要是对WebGL编程以面向对象方式进行的封装。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.cocos.com/" class="duty-card" target="_blank"
                               title="Cocos - 一个基于MIT协议的开源框架，用于构建游戏、应用程序和其他图形界面交互应用。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/5b3e796254ee9b7c.jpg">Cocos
                                </div>
                                <div class="duty-card-des">一个基于MIT协议的开源框架，用于构建游戏、应用程序和其他图形界面交互应用。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://impactjs.com/" class="duty-card" target="_blank"
                               title="ImpactJS - ImpactJS是一个基于JavaScript的HTML5游戏引擎,同时支持PC和移动平台浏览器。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/4d8511ffce203524.png">ImpactJS
                                </div>
                                <div class="duty-card-des">ImpactJS是一个基于JavaScript的HTML5游戏引擎,同时支持PC和移动平台浏览器。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/gabrielecirulli/2048" class="duty-card" target="_blank"
                               title="2048 - 一个简单的 1024 游戏的复制品。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/458d1c0947bd0da4.png">2048
                                </div>
                                <div class="duty-card-des">一个简单的 1024 游戏的复制品。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/liabru/matter-js" class="duty-card" target="_blank"
                               title="Matter.js - 一个 2D 刚体物理引擎。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/8416d7e2700b949e.jpg">Matter.js
                                </div>
                                <div class="duty-card-des">一个 2D 刚体物理引擎。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-19" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-sun-o"></i>代码高亮</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://codemirror.net/" class="duty-card" target="_blank"
                               title="CodeMirror - CodeMirror 是一个为浏览器定制的全能的文本编辑器，用 JavaScript 实现。专门用来编写代码，支持超过100个语言，以及各种各样的扩展让我们实现更高级的编辑功能。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/be50c8be0e5d3f0a.png">CodeMirror
                                </div>
                                <div class="duty-card-des">CodeMirror 是一个为浏览器定制的全能的文本编辑器，用 JavaScript
                                    实现。专门用来编写代码，支持超过100个语言，以及各种各样的扩展让我们实现更高级的编辑功能。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://highlightjs.org/" class="duty-card" target="_blank"
                               title="Highlight.js - Highlight.js 是一个用 JavaScript 写的代码高亮插件，在客户端和服务端都能工作。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/92b1fbef3810a676.png">Highlight.js
                                </div>
                                <div class="duty-card-des">Highlight.js 是一个用 JavaScript 写的代码高亮插件，在客户端和服务端都能工作。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://prismjs.com/" class="duty-card" target="_blank"
                               title="Prism - 一个轻量级的，稳健的，优雅简洁的语法高亮插件。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/9c9cf00632bcadce.png">Prism
                                </div>
                                <div class="duty-card-des">一个轻量级的，稳健的，优雅简洁的语法高亮插件。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://microsoft.github.io/monaco-editor/" class="duty-card" target="_blank"
                               title="Monaco-editor - 一个基于浏览器的代码编辑器。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/cf9ba2db67a41f1e.png">Monaco-editor
                                </div>
                                <div class="duty-card-des">一个基于浏览器的代码编辑器。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-20" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-github"></i>代码托管</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://github.com/" class="duty-card" target="_blank"
                               title="GitHub - github是一款分布式的版本控制系统，是一个面向开源及私有软件项目的托管平台。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/a5e37ff7de953f1a.jpg">GitHub
                                </div>
                                <div class="duty-card-des">github是一款分布式的版本控制系统，是一个面向开源及私有软件项目的托管平台。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://coding.net/" class="duty-card" target="_blank"
                               title="Coding - Coding 是一个面向开发者的云端开发平台，目前提供代码托管，运行空间，质量控制，项目管理等功能。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/41b57615cd7248d4.jpg">Coding
                                </div>
                                <div class="duty-card-des">Coding 是一个面向开发者的云端开发平台，目前提供代码托管，运行空间，质量控制，项目管理等功能。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://code.csdn.net/" class="duty-card" target="_blank"
                               title="Code - CSDN是一个面向国内开发者提供代码托管、代码片、社交编程、组织管理、社区讨论、知识库等开发服务平台。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/95f068259e3d6eaa.png">Code
                                </div>
                                <div class="duty-card-des">CSDN是一个面向国内开发者提供代码托管、代码片、社交编程、组织管理、社区讨论、知识库等开发服务平台。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://git.oschina.net/" class="duty-card" target="_blank"
                               title="码云 - 码云是开源中国社区团队推出的基于Git的快速的、免费的、稳定的在线代码托管平台。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/dc2f317b88f646c.jpg">码云
                                </div>
                                <div class="duty-card-des">码云是开源中国社区团队推出的基于Git的快速的、免费的、稳定的在线代码托管平台。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://bitbucket.org/" class="duty-card" target="_blank"
                               title="Bitbucket - BitBucket 是一家源代码托管网站，采用Mercurial和Git作为分布式版本控制系统。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/d181508cb87a2a04.jpg">Bitbucket
                                </div>
                                <div class="duty-card-des">BitBucket 是一家源代码托管网站，采用Mercurial和Git作为分布式版本控制系统。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://about.gitlab.com/" class="duty-card" target="_blank"
                               title="Gitlab - GitLab 是一个基于 git 的仓库管理程序,也是一个方便软件开发的强大完整应用。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/3c57c7882303493a.jpg">Gitlab
                                </div>
                                <div class="duty-card-des">GitLab 是一个基于 git 的仓库管理程序,也是一个方便软件开发的强大完整应用。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://gitshell.com/" class="duty-card" target="_blank"
                               title="Gitshell - Gitshell 是一个使用git版本控制系统的项目，类似github，提供clone，push，pull，branch管理等。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/f6ad368abae1aa8.png">Gitshell
                                </div>
                                <div class="duty-card-des">Gitshell
                                    是一个使用git版本控制系统的项目，类似github，提供clone，push，pull，branch管理等。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.svnchina.com/" class="duty-card" target="_blank"
                               title="SVN China - 为中国广大程序员而创办的SVN源代码托管站,支持Subversion权限管理、版本管理、修订纪录订阅、SVN库备份导入导出等功能。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/c0f5bb978ef67736.jpg">SVN
                                    China
                                </div>
                                <div class="duty-card-des">
                                    为中国广大程序员而创办的SVN源代码托管站,支持Subversion权限管理、版本管理、修订纪录订阅、SVN库备份导入导出等功能。
                                </div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-21" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-wordpress"></i>博客系统</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://cn.wordpress.org/" class="duty-card" target="_blank"
                               title="WordPress - WordPress是使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/c94c0ff48ac4e.png">WordPress
                                </div>
                                <div class="duty-card-des">WordPress是使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://jpress.io/" class="duty-card" target="_blank"
                               title="JPress - JPress，一个wordpress的java代替版本，使用JFinal开发。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/744e4b0c100f7108.png">JPress
                                </div>
                                <div class="duty-card-des">JPress，一个wordpress的java代替版本，使用JFinal开发。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.ghostchina.com/" class="duty-card" target="_blank"
                               title="Ghost - Ghost 是基于 Node.js 的开源博客平台，由前 WordPress UI 部门主管 John O’Nolan 和 WordPress 高级工程师&#65288;女&#65289; Hannah Wolfe 创立。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/ab96b50b381a657e.png">Ghost
                                </div>
                                <div class="duty-card-des">Ghost 是基于 Node.js 的开源博客平台，由前 WordPress UI 部门主管 John O’Nolan 和
                                    WordPress 高级工程师&#65288;女&#65289; Hannah Wolfe 创立。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://hexo.io/zh-cn/" class="duty-card" target="_blank"
                               title="Hexo - 快速、简洁且高效的博客框架。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/1e0015a03faccfd2.png">Hexo
                                </div>
                                <div class="duty-card-des">快速、简洁且高效的博客框架。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.jekyll.com.cn/" class="duty-card" target="_blank"
                               title="Jekyll - jekyll是一个简单的免费的Blog生成工具，类似WordPress。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/e3bddca79c0728f6.png">Jekyll
                                </div>
                                <div class="duty-card-des">jekyll是一个简单的免费的Blog生成工具，类似WordPress。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://pages.github.com/" class="duty-card" target="_blank"
                               title="GithubPages - Github Pages是Github免费提供给开发者的一款托管个人网站的产品。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/5d7c29d09a871812.png">GithubPages
                                </div>
                                <div class="duty-card-des">Github Pages是Github免费提供给开发者的一款托管个人网站的产品。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.siteserver.cn/" class="duty-card" target="_blank"
                               title="SiteServer CMS - 中国.NET平台下最强大的企业级开源CMS系统，可免费用于商业用途。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/380ab5e2ec13b2fa.png">SiteServer
                                    CMS
                                </div>
                                <div class="duty-card-des">中国.NET平台下最强大的企业级开源CMS系统，可免费用于商业用途。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://typecho.org/" class="duty-card" target="_blank"
                               title="Typecho - 一款内核强健&#65105;扩展方便&#65105;体验友好&#65105;运行流畅的轻量级开源博客程序。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/97fc814d1842793a.png">Typecho
                                </div>
                                <div class="duty-card-des">一款内核强健&#65105;扩展方便&#65105;体验友好&#65105;运行流畅的轻量级开源博客程序。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.dedecms.com/" class="duty-card" target="_blank"
                               title="织梦CMS - 国内开源CMS的领先品牌，目前程序安装量已达七十万。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/5/9be484de7dce1a0a.jpg">织梦CMS
                                </div>
                                <div class="duty-card-des">国内开源CMS的领先品牌，目前程序安装量已达七十万。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-22" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-jsfiddle"></i>域名/服务器</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.aliyun.com/" class="duty-card" target="_blank"
                               title="阿里云 - 阿里云——阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/9222da06ce5bedcc.jpg">阿里云
                                </div>
                                <div class="duty-card-des">阿里云——阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://cloud.baidu.com/" class="duty-card" target="_blank"
                               title="百度云 - 百度云---百度基于17年技术积累为公有云需求者提供稳定、高可用、可扩展的云计算服务。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/dae73b011a195eab.jpg">百度云
                                </div>
                                <div class="duty-card-des">百度云---百度基于17年技术积累为公有云需求者提供稳定、高可用、可扩展的云计算服务。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://cloud.tencent.com/" class="duty-card" target="_blank"
                               title="腾讯云 - 腾讯云 - 腾讯公司倾力打造的面向广大企业和个人的公有云平台。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/e44a3d84c7b82fcb.jpg">腾讯云
                                </div>
                                <div class="duty-card-des">腾讯云 - 腾讯公司倾力打造的面向广大企业和个人的公有云平台。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.huaweicloud.com/" class="duty-card" target="_blank"
                               title="华为云 - 华为云是华为公司倾力打造的云战略品牌，致力于为全球客户提供领先的公有云服务。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/871cdcb1cb9f4f5b.jpg">华为云
                                </div>
                                <div class="duty-card-des">华为云是华为公司倾力打造的云战略品牌，致力于为全球客户提供领先的公有云服务。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.jcloud.com/" class="duty-card" target="_blank"
                               title="京东云 - 京东云以京东在云计算、大数据、物联网等方面的多年技术积淀,为广大用户和个人站长提供稳定、安全、便捷的多种解决方案。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/cf232a545e4e059b.jpg">京东云
                                </div>
                                <div class="duty-card-des">京东云以京东在云计算、大数据、物联网等方面的多年技术积淀,为广大用户和个人站长提供稳定、安全、便捷的多种解决方案。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.163yun.com/" class="duty-card" target="_blank"
                               title="网易云 - 网易云是网易旗下云计算和大数据品牌，业界领先的高品质场景化云服务和大数据服务商。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/cd6380b5f20a60e3.jpg">网易云
                                </div>
                                <div class="duty-card-des">网易云是网易旗下云计算和大数据品牌，业界领先的高品质场景化云服务和大数据服务商。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.west.cn/" class="duty-card" target="_blank"
                               title="西部数码 - 西部数码是基于云计算领先的互联网服务提供商，15年专业知名品牌。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/759fc6a040e724f3.jpg">西部数码
                                </div>
                                <div class="duty-card-des">西部数码是基于云计算领先的互联网服务提供商，15年专业知名品牌。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.cndns.com/" class="duty-card" target="_blank"
                               title="美橙互联 - 美橙互联-虚拟专用服务器空间提供商和国家cnnic认证四星级注册商。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/36f9c791a6cbeb3b.jpg">美橙互联
                                </div>
                                <div class="duty-card-des">美橙互联-虚拟专用服务器空间提供商和国家cnnic认证四星级注册商。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.biggeryun.com/" class="duty-card" target="_blank"
                               title="比格云 - 比格云是专业的云服务提供商,以“更快、更稳、更便捷“的品牌理念,致力于做世界一流高性能云主机。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/9576b0639947858b.jpg">比格云
                                </div>
                                <div class="duty-card-des">比格云是专业的云服务提供商,以“更快、更稳、更便捷“的品牌理念,致力于做世界一流高性能云主机。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.ucloud.cn/" class="duty-card" target="_blank"
                               title="UCloud - UCloud是中国领先的中立云计算服务商，也是国家工信部首批认证通过的“可信云”。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/619555bc3ec1efb.png">UCloud
                                </div>
                                <div class="duty-card-des">UCloud是中国领先的中立云计算服务商，也是国家工信部首批认证通过的“可信云”。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.xinnet.com/" class="duty-card" target="_blank"
                               title="新网 - 24年互联网基础服务运营经验，中国互联网基础服务提供商，一站式网络营销平台，高效便捷&#65281;">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/c7106286f892a983.jpg">新网
                                </div>
                                <div class="duty-card-des">24年互联网基础服务运营经验，中国互联网基础服务提供商，一站式网络营销平台，高效便捷&#65281;</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.sudu.cn/domain/" class="duty-card" target="_blank"
                               title="华夏名网 - 华夏名网，成都飞数科技公司旗下之网络服务品牌，创于2002年，乃国内首批具ICP资质之服务商。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/d6c7775065f6f11a.jpg">华夏名网
                                </div>
                                <div class="duty-card-des">华夏名网，成都飞数科技公司旗下之网络服务品牌，创于2002年，乃国内首批具ICP资质之服务商。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://sg.godaddy.com/zh" class="duty-card" target="_blank"
                               title="GoDaddy - 世界知名互联网域名注册商GoDaddy，业务遍布全球，致力于为中国企业和个人用户提供卓越的网站服务。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/7725ec23ac317032.jpg">GoDaddy
                                </div>
                                <div class="duty-card-des">世界知名互联网域名注册商GoDaddy，业务遍布全球，致力于为中国企业和个人用户提供卓越的网站服务。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://cn.resellerclub.com/" class="duty-card" target="_blank"
                               title="ResellerClub(CN) - ResellerClub-域名主机提供商，19年行业经验，全球域名注册商前十强。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/dee8331c0bf5072.jpg">ResellerClub(CN)
                                </div>
                                <div class="duty-card-des">ResellerClub-域名主机提供商，19年行业经验，全球域名注册商前十强。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://cn.bluehost.com/" class="duty-card" target="_blank"
                               title="Bluehost - 全球第&#9312;主机商，21年主机经验，专业虚拟主机、独立服务器、VPS主机、云主机、域名等服务。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/e5f501f7071c86c2.jpg">Bluehost
                                </div>
                                <div class="duty-card-des">全球第&#9312;主机商，21年主机经验，专业虚拟主机、独立服务器、VPS主机、云主机、域名等服务。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://amazonaws-china.com/cn/" class="duty-card" target="_blank"
                               title="亚马逊云 - AWS - 亚马逊公司旗下云计算服务平台，为全世界各个国家和地区的客户提供一整套基础设施和云解决方案。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/a72df62415940ec2.jpg">亚马逊云
                                </div>
                                <div class="duty-card-des">AWS - 亚马逊公司旗下云计算服务平台，为全世界各个国家和地区的客户提供一整套基础设施和云解决方案。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-23" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-paperclip"></i>辅助工具</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://card.qdsay.com/" class="duty-card" target="_blank"
                               title="云配色 - 云配色 - 一键查询网页前端CSS、JS技术架构和配色方案。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/fbef7e16178c68aa.png">云配色
                                </div>
                                <div class="duty-card-des">云配色 - 一键查询网页前端CSS、JS技术架构和配色方案。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://kuaiqie.qdsay.com/" class="duty-card" target="_blank"
                               title="勤道快切助手 - 在线网页切图工具，采用图片识别技术，在线切图转页面。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/2131507ae6b2127a.png">勤道快切助手
                                </div>
                                <div class="duty-card-des">在线网页切图工具，采用图片识别技术，在线切图转页面。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://layerstyles.org/builder.html" class="duty-card" target="_blank"
                               title="Layer Styles - 国外一个CSS3阴影在线生成器网站">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/cd376cf0b62de942.png">Layer
                                    Styles
                                </div>
                                <div class="duty-card-des">国外一个CSS3阴影在线生成器网站</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.processon.com/" class="duty-card" target="_blank"
                               title="ProcessOn - ProcessOn是一个方便易用、免费高效的在线作图工具，运用它可以免费制作多种图。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/6e97d3d79f7a604a.png">ProcessOn
                                </div>
                                <div class="duty-card-des">ProcessOn是一个方便易用、免费高效的在线作图工具，运用它可以免费制作多种图。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.box3.cn/" class="duty-card" target="_blank"
                               title="开发工具箱 - 这个网站集合了各种工具，相信总有一款你用得上。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/bc650e2cab59ea12.png">开发工具箱
                                </div>
                                <div class="duty-card-des">这个网站集合了各种工具，相信总有一款你用得上。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.mikecrm.com" class="duty-card" target="_blank"
                               title="麦客CRM - 麦客CRM是一款在线表单制作工具，同时也是强大的客户信息处理和关系管理系统。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/f68e886d2b0b9962.jpg">麦客CRM
                                </div>
                                <div class="duty-card-des">麦客CRM是一款在线表单制作工具，同时也是强大的客户信息处理和关系管理系统。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://naotu.baidu.com/" class="duty-card" target="_blank"
                               title="百度脑图 - 便捷的脑图编辑工具 - 控制创意，如此简单，让您在线上直接创建、保存并分享你的思路。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/632c218a9be1576a.png">百度脑图
                                </div>
                                <div class="duty-card-des">便捷的脑图编辑工具 - 控制创意，如此简单，让您在线上直接创建、保存并分享你的思路。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://huaban.com/about/goodies/" class="duty-card" target="_blank"
                               title="花瓣采集工具 - 你可以方便地保存任意网站上的图片、视频和截图。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/88dc363a15d31642.jpg">花瓣采集工具
                                </div>
                                <div class="duty-card-des">你可以方便地保存任意网站上的图片、视频和截图。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.wenjuan.net/" class="duty-card" target="_blank"
                               title="问卷网 - 网络调查平台、问卷调查、市场调查、网络调查、表单设计。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/bc99ec00a66a8082.jpg">问卷网
                                </div>
                                <div class="duty-card-des">网络调查平台、问卷调查、市场调查、网络调查、表单设计。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://xiuxiu.web.meitu.com/" class="duty-card" target="_blank"
                               title="美图秀秀网页版 - 美图秀秀 旗下图片处理软件中的在线版，不用下载直接使用。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/fbd44c2a62246d2a.jpg">美图秀秀网页版
                                </div>
                                <div class="duty-card-des">美图秀秀 旗下图片处理软件中的在线版，不用下载直接使用。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.wjx.cn/" class="duty-card" target="_blank"
                               title="问卷星 - 问卷星提供30多种题型，强大的统计分析功能，统计报告和原始答卷可免费下载。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/22c2a2474cd2b48a.jpg">问卷星
                                </div>
                                <div class="duty-card-des">问卷星提供30多种题型，强大的统计分析功能，统计报告和原始答卷可免费下载。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://tool.lu/css/" class="duty-card" target="_blank"
                               title="CSS在线压缩工具 - Css在线解压缩工具/整理/格式化。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/77abd2f285a5e79e.png">CSS在线压缩工具
                                </div>
                                <div class="duty-card-des">Css在线解压缩工具/整理/格式化。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://cli.im/" class="duty-card" target="_blank"
                               title="草料二维码 - 草料二维码是国内专业的二维码服务提供商，提供二维码生成、美化、印制、管理、统计等服务。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/aebdbbea9ede96e0.jpg">草料二维码
                                </div>
                                <div class="duty-card-des">草料二维码是国内专业的二维码服务提供商，提供二维码生成、美化、印制、管理、统计等服务。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.zybuluo.com/cmd/" class="duty-card" target="_blank"
                               title="Cmd Markdown - 编辑阅读器，支持实时同步预览，区分写作和阅读模式，支持在线存储，分享文稿网址。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/12c514efb877f3b6.png">Cmd
                                    Markdown
                                </div>
                                <div class="duty-card-des">编辑阅读器，支持实时同步预览，区分写作和阅读模式，支持在线存储，分享文稿网址。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://maka.im/" class="duty-card" target="_blank"
                               title="MACA 免费H5页面 - 强大的免费H5页面、微场景制作平台。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/a3385c1c3a8252f2.png">MACA
                                    免费H5页面
                                </div>
                                <div class="duty-card-des">强大的免费H5页面、微场景制作平台。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://modao.cc/" class="duty-card" target="_blank"
                               title="墨刀 - 强大易用的免费移动应用原型与线框图工具。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/e088699736bde1b6.png">墨刀
                                </div>
                                <div class="duty-card-des">强大易用的免费移动应用原型与线框图工具。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://koala-app.com/index-zh.html" class="duty-card" target="_blank"
                               title="koala - 编译工具 - koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/5e163abb7473416a.png">koala
                                    - 编译工具
                                </div>
                                <div class="duty-card-des">koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://tower.im/" class="duty-card" target="_blank"
                               title="tower - 项目管理，任务管理，团队协作，项目协作等。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/61bd5f2691e39118.png">tower
                                </div>
                                <div class="duty-card-des">项目管理，任务管理，团队协作，项目协作等。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://aeditor.alloyteam.com/" class="duty-card" target="_blank"
                               title="AEditor - AEditor是一个方便广大web开发者进行H5动画交互页开发的工具">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/a41bf14350981642.png">AEditor
                                </div>
                                <div class="duty-card-des">AEditor是一个方便广大web开发者进行H5动画交互页开发的工具</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.browsersync.cn/" class="duty-card" target="_blank"
                               title="Browsersync - 省时的浏览器同步测试工具，能让浏览器实时、快速响应您的文件更改并自动刷新页面。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/f8fd17ef13a14444.png">Browsersync
                                </div>
                                <div class="duty-card-des">省时的浏览器同步测试工具，能让浏览器实时、快速响应您的文件更改并自动刷新页面。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://tinypng.com/" class="duty-card" target="_blank"
                               title="TinyPNG - 图片压缩网站，支持小于5M的jpg、png图片的压缩。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/35e3b40398dc5a68.jpg">TinyPNG
                                </div>
                                <div class="duty-card-des">图片压缩网站，支持小于5M的jpg、png图片的压缩。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://zaole.net/" class="duty-card" target="_blank"
                               title="CSS3，H5在线测试 - CSS3-html5在线测试 手机响应式效果。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/834a85bf278245fc.jpg">CSS3，H5在线测试
                                </div>
                                <div class="duty-card-des">CSS3-html5在线测试 手机响应式效果。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.css3maker.com/css3-transform.html" class="duty-card" target="_blank"
                               title="Css3Maker - CSS3在线生成器，给你省去很多功夫。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/8834aef3c30840f2.png">Css3Maker
                                </div>
                                <div class="duty-card-des">CSS3在线生成器，给你省去很多功夫。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.biaonimeia.com/" class="duty-card" target="_blank"
                               title="标你妹啊 - 无需下载客户端，自动转换px/dp/pt单位，高效、全自动、免费&#65281;">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/ba927961a1d96ab0.png">标你妹啊
                                </div>
                                <div class="duty-card-des">无需下载客户端，自动转换px/dp/pt单位，高效、全自动、免费&#65281;</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.cutterman.cn/zh/cutterman" class="duty-card" target="_blank"
                               title="Cutterman - 没错,最好用的切图工具,它是免费的,就是这么任性&#33; 此站很多神器。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/7639a3851aabef0e.png">Cutterman
                                </div>
                                <div class="duty-card-des">没错,最好用的切图工具,它是免费的,就是这么任性&#33; 此站很多神器。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://zhongguose.com" class="duty-card" target="_blank"
                               title="中国色（颜色库） - 供各种中国的传统颜色的名称，CMYK值，RGB值，16进制表示。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/845eb22362ae058e.png">中国色（颜色库）
                                </div>
                                <div class="duty-card-des">供各种中国的传统颜色的名称，CMYK值，RGB值，16进制表示。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.36zhen.com/" class="duty-card" target="_blank"
                               title="36镇（共享收藏夹） - 一个能在线收藏网址、整理、团队共享网址的收藏夹。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/1260d3e4c61b0178.png">36镇（共享收藏夹）
                                </div>
                                <div class="duty-card-des">一个能在线收藏网址、整理、团队共享网址的收藏夹。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://colordrop.io/" class="duty-card" target="_blank"
                               title="ColorDrop - colordrop是一个很棒的配色网站，收录了不少漂亮的配色方案，而且选定方案之后便会弹出对应的Hex与RGB色值。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/ac256291707e2e70.png">ColorDrop
                                </div>
                                <div class="duty-card-des">colordrop是一个很棒的配色网站，收录了不少漂亮的配色方案，而且选定方案之后便会弹出对应的Hex与RGB色值。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.chuangkit.com/" class="duty-card" target="_blank"
                               title="创客贴 - 创客贴是国内首创极简在线平面设计工具，专注在线免费设计图片，素材下载及在线印刷。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/6d3d144ff65739c2.png">创客贴
                                </div>
                                <div class="duty-card-des">创客贴是国内首创极简在线平面设计工具，专注在线免费设计图片，素材下载及在线印刷。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://smallpdf.com/cn" class="duty-card" target="_blank"
                               title="Smallpdf - 在线PDF压缩，转换格式的好工具&#65288;压缩率超高&#65289;。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/d0de0f540fe0a9c8.png">Smallpdf
                                </div>
                                <div class="duty-card-des">在线PDF压缩，转换格式的好工具&#65288;压缩率超高&#65289;。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://qrohlf.com/trianglify/" class="duty-card" target="_blank"
                               title="Trianglify - Trianglify 是一款可以生成漂亮的三角形素材的工具，它还可以生成SVG或者CSS的背景。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/d2ab6214eeb8ec02.png">Trianglify
                                </div>
                                <div class="duty-card-des">Trianglify 是一款可以生成漂亮的三角形素材的工具，它还可以生成SVG或者CSS的背景。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.polaxiong.com/" class="duty-card" target="_blank"
                               title="泼辣修图 - 一款免费的在线图像处理软件，只要页面加载完成，导出导入图片不再受网络影响">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/72c267138f889315.png">泼辣修图
                                </div>
                                <div class="duty-card-des">一款免费的在线图像处理软件，只要页面加载完成，导出导入图片不再受网络影响</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://docsmall.com/" class="duty-card" target="_blank"
                               title="docsmall - 简单好用的在线图片压缩工具">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2019/2/c22f461ac3da736c.jpg">docsmall
                                </div>
                                <div class="duty-card-des">简单好用的在线图片压缩工具</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href=" https://psd2css.mezw.com" class="duty-card" target="_blank"
                               title="MEZW - 将PS中的投影效果转换为CSS3中的box-shadow &amp; text-shadow代码">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2019/3/568a3596ef27488.jpg">MEZW
                                </div>
                                <div class="duty-card-des">将PS中的投影效果转换为CSS3中的box-shadow &amp; text-shadow代码</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-24" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-flag"></i>站长工具</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://ziyuan.baidu.com/" class="duty-card" target="_blank"
                               title="百度搜索资源平台 - 全球最大的面向中文互联网管理者、移动开发者、创业者的搜索流量管理的官方平台。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/38007e9b23b4a45d.png">百度搜索资源平台
                                </div>
                                <div class="duty-card-des">全球最大的面向中文互联网管理者、移动开发者、创业者的搜索流量管理的官方平台。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.bing.com/toolbox/webmaster/" class="duty-card" target="_blank"
                               title="必应站长平台 - 登录或注册必应网络管理员工具并提高您的网站在搜索时的性能。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/9512806953cde85d.png">必应站长平台
                                </div>
                                <div class="duty-card-des">登录或注册必应网络管理员工具并提高您的网站在搜索时的性能。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://tongji.baidu.com/web/welcome/login" class="duty-card" target="_blank"
                               title="百度统计 - 百度统计——最大的中文网站分析平台。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/dca8b1a9b69a4e4d.jpg">百度统计
                                </div>
                                <div class="duty-card-des">百度统计——最大的中文网站分析平台。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.aizhan.com/" class="duty-card" target="_blank"
                               title="爱站网 - 爱站网站长工具提供网站收录查询和站长查询以及百度权重值查询等多个站长工具。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/eb449f3e369e83bd.png">爱站网
                                </div>
                                <div class="duty-card-des">爱站网站长工具提供网站收录查询和站长查询以及百度权重值查询等多个站长工具。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://tool.chinaz.com/" class="duty-card" target="_blank"
                               title="站长工具 - 站长工具是站长的必备工具，经常上站长工具可以了解SEO数据变化。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/e3b0ef84337b39dd.png">站长工具
                                </div>
                                <div class="duty-card-des">站长工具是站长的必备工具，经常上站长工具可以了解SEO数据变化。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.umeng.com/" class="duty-card" target="_blank"
                               title="友盟+ - 全球领先的第三方全域数据服务商，为客户提供PC/APP/线下统计等数据报告。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/c0b63cf25815012d.jpg">友盟+
                                </div>
                                <div class="duty-card-des">全球领先的第三方全域数据服务商，为客户提供PC/APP/线下统计等数据报告。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.51.la/" class="duty-card" target="_blank"
                               title="51.la - 我要啦，统计面向网站站长提供免费的、功能完善的、人性化的网站流量统计分析服务。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/c154166d0926cb25.png">51.la
                                </div>
                                <div class="duty-card-des">我要啦，统计面向网站站长提供免费的、功能完善的、人性化的网站流量统计分析服务。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://developer.baidu.com/" class="duty-card" target="_blank"
                               title="百度开发者中心 - 汇聚、开放、助力、共赢，为开发者提供开发、推广、运营、变现一站式的服务体验。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/eeb02d5a01e756c5.png">百度开发者中心
                                </div>
                                <div class="duty-card-des">汇聚、开放、助力、共赢，为开发者提供开发、推广、运营、变现一站式的服务体验。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.uyan.cc/" class="duty-card" target="_blank"
                               title="友言评论 - 专业网站社会化评论系统，一键同步评论留言分享到社交平台，实时采集SNS相关留言评论，迅速提升网站社会化流量。 ">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/d68fcbe49cddef64.jpg">友言评论
                                </div>
                                <div class="duty-card-des">专业网站社会化评论系统，一键同步评论留言分享到社交平台，实时采集SNS相关留言评论，迅速提升网站社会化流量。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://changyan.kuaizhan.com/" class="duty-card" target="_blank"
                               title="畅言 - 专业的社会化评论系统，畅言是一个简单而强大的社会化评论及聚合平台。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/cc0020915d7a8013.png">畅言
                                </div>
                                <div class="duty-card-des">专业的社会化评论系统，畅言是一个简单而强大的社会化评论及聚合平台。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://check.links.cn/" class="duty-card" target="_blank"
                               title="友情链接检测工具 - 即时了解哪些友情链接私自撤下链接，能自动识别JS链接、iframe链接等欺骗链接的方式，让站长轻松管理网站的友情链接。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/59300f3a6a9031ee.gif">友情链接检测工具
                                </div>
                                <div class="duty-card-des">即时了解哪些友情链接私自撤下链接，能自动识别JS链接、iframe链接等欺骗链接的方式，让站长轻松管理网站的友情链接。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://union.baidu.com" class="duty-card" target="_blank"
                               title="百度联盟 - 做网站必备的赚钱工具，审核较严格，需要备案，付款方便，但要扣税，广告种类多。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/16912052bb3eb9f2.png">百度联盟
                                </div>
                                <div class="duty-card-des">做网站必备的赚钱工具，审核较严格，需要备案，付款方便，但要扣税，广告种类多。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://union.sogou.com/" class="duty-card" target="_blank"
                               title="搜狗联盟 - 搜狗联盟向会员提供互联网流量变现业务服务。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/917a39c50a1b7603.jpg">搜狗联盟
                                </div>
                                <div class="duty-card-des">搜狗联盟向会员提供互联网流量变现业务服务。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.bshare.cn/" class="duty-card" target="_blank"
                               title="分享代码 - 中国最强大的社会化图文分享工具&#65281;">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/7de145a6da73a10b.gif">分享代码
                                </div>
                                <div class="duty-card-des">中国最强大的社会化图文分享工具&#65281;</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.miitbeian.gov.cn" class="duty-card" target="_blank"
                               title="备案管理系统 - 工业和信息化部ICP/IP地址/域名信息备案管理系统">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/2261cfda22652bfa.png">备案管理系统
                                </div>
                                <div class="duty-card-des">工业和信息化部ICP/IP地址/域名信息备案管理系统</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.google.com/webmasters/tools/home" class="duty-card" target="_blank"
                               title="Search Console - Google谷歌站长管理平台">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/40d1877f28a26509.jpg">Search
                                    Console
                                </div>
                                <div class="duty-card-des">Google谷歌站长管理平台</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://trends.so.com/" class="duty-card" target="_blank"
                               title="360趋势 - 360海量用户数据为基础的大数据展示平台">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2019/9/6e51646e2a696bd4.png">360趋势
                                </div>
                                <div class="duty-card-des">360海量用户数据为基础的大数据展示平台</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://index.baidu.com" class="duty-card" target="_blank"
                               title="百度指数 - 百度海量网民行为数据为基础的数据分享平台">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2019/9/d182f98cf2e7057f.jpg">百度指数
                                </div>
                                <div class="duty-card-des">百度海量网民行为数据为基础的数据分享平台</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://zhanzhang.so.com/" class="duty-card" target="_blank"
                               title="360站长平台 - 360官方站长平台，提供站点提交数据统计等功能">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2019/9/6e51646e2a696bd4.png">360站长平台
                                </div>
                                <div class="duty-card-des">360官方站长平台，提供站点提交数据统计等功能</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://zhanzhang.sogou.com/" class="duty-card" target="_blank"
                               title="搜狗站长平台 - 公平开放的交流平台">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="http://zhanzhang.sogou.com/images/favicon.ico">搜狗站长平台
                                </div>
                                <div class="duty-card-des">公平开放的交流平台</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-25" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-photo"></i>图片素材</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://pixabay.com/" class="duty-card" target="_blank"
                               title="Pixabay - 全球最大的免费可商用高清图库网站，超过130万张免费的优质图片及视频素材。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/302447bfcb844997.png">Pixabay
                                </div>
                                <div class="duty-card-des">全球最大的免费可商用高清图库网站，超过130万张免费的优质图片及视频素材。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.gratisography.com/" class="duty-card" target="_blank"
                               title="Gratisography - Gratisography-超高清优质可商用图库，各种创意图片，图片可用于商业用途。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/4340a862ab0d6c81.png">Gratisography
                                </div>
                                <div class="duty-card-des">Gratisography-超高清优质可商用图库，各种创意图片，图片可用于商业用途。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://magdeleine.co/browse/" class="duty-card" target="_blank"
                               title="Magdeleine - 高清灵感图片资源下载,免费的哦，不用登录即可直接点击下载。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/4605b0938044e895.png">Magdeleine
                                </div>
                                <div class="duty-card-des">高清灵感图片资源下载,免费的哦，不用登录即可直接点击下载。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://unsplash.com/" class="duty-card" target="_blank"
                               title="Unsplash - Unsplash - 美丽，免费的照片，高质量图库，同样不用登陆直接下载。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/8419b1366cffa9d9.png">Unsplash
                                </div>
                                <div class="duty-card-des">Unsplash - 美丽，免费的照片，高质量图库，同样不用登陆直接下载。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://cn.freeimages.com/" class="duty-card" target="_blank"
                               title="FAMILYSAFE - 超高清免费图库，超过30万张免费高清图片，注册登录后直接可以下载&#65281;">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/d29d566949bb447.png">FAMILYSAFE
                                </div>
                                <div class="duty-card-des">超高清免费图库，超过30万张免费高清图片，注册登录后直接可以下载&#65281;</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://foodshot.co/" class="duty-card" target="_blank"
                               title="Foodshot - 美食主题图库，图片质量都比较高，图片点击下载然后另存为就可以了。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/e3970dbc703f76af.png">Foodshot
                                </div>
                                <div class="duty-card-des">美食主题图库，图片质量都比较高，图片点击下载然后另存为就可以了。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://publicdomainarchive.com/" class="duty-card" target="_blank"
                               title="publicdomain - publicdomainarchive目前已经有33万张免费高清图像下载，设计师可以免费使用在你的创意项目上。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/7f2d171ac5943a21.jpg">publicdomain
                                </div>
                                <div class="duty-card-des">publicdomainarchive目前已经有33万张免费高清图像下载，设计师可以免费使用在你的创意项目上。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://barnimages.com/" class="duty-card" target="_blank"
                               title="Barn Images - 这些相片看起来确实跟一般的图库相片很不一样，不但很有质感，也少了一种制式的感觉。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/5c016634a377c0ad.png">Barn
                                    Images
                                </div>
                                <div class="duty-card-des">这些相片看起来确实跟一般的图库相片很不一样，不但很有质感，也少了一种制式的感觉。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.socwall.com/" class="duty-card" target="_blank"
                               title="Socwall - 高清免费图库，不用登陆直接可以下载，风景类图片居多。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/a26b487477325c05.png">Socwall
                                </div>
                                <div class="duty-card-des">高清免费图库，不用登陆直接可以下载，风景类图片居多。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://stocksnap.io/" class="duty-card" target="_blank"
                               title="StockSnap.io - 高清免费大图素材，不用登陆直接可以下载，每周更新超过百张高清免费图片。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/2a8b0b37b90f75cb.png">StockSnap.io
                                </div>
                                <div class="duty-card-des">高清免费大图素材，不用登陆直接可以下载，每周更新超过百张高清免费图片。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.pexels.com/" class="duty-card" target="_blank"
                               title="Pexels - 推荐&#65281;提供高清尺寸且品质优良的免费照片网站，直接可以下载，图片可用于任何用途。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/1ca2e92160969aee.png">Pexels
                                </div>
                                <div class="duty-card-des">推荐&#65281;提供高清尺寸且品质优良的免费照片网站，直接可以下载，图片可用于任何用途。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.designerspics.com/" class="duty-card" target="_blank"
                               title="DesignersPics - 免费可以商用的图片网站，好图不多，需要花点时间才能找到自己喜欢的。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/e2980c1b1a0b6.png">DesignersPics
                                </div>
                                <div class="duty-card-des">免费可以商用的图片网站，好图不多，需要花点时间才能找到自己喜欢的。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://deathtothestockphoto.com/" class="duty-card" target="_blank"
                               title="DEATH TO STOCK - 高清免费图片网站，图片都是同系列多张打包好的压缩包，文件较大，注册成会员可以查看更多图片。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/dce9b3894ef06a32.png">DEATH
                                    TO STOCK
                                </div>
                                <div class="duty-card-des">高清免费图片网站，图片都是同系列多张打包好的压缩包，文件较大，注册成会员可以查看更多图片。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.hdwallpapers.net/" class="duty-card" target="_blank"
                               title="HD wallpapers - 免费高清壁纸图库，提供多种尺寸下载，图片商用需要作者许可哦&#65281;">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/3406bd8986fba44a.png">HD
                                    wallpapers
                                </div>
                                <div class="duty-card-des">免费高清壁纸图库，提供多种尺寸下载，图片商用需要作者许可哦&#65281;</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://visualhunt.com/" class="duty-card" target="_blank"
                               title="Visual Hunt - 一个提供高品质免费图片素材的站点，收录了海量的CC0授权图片整合后生成的站点，用户可以通过内置的搜索引擎来查询海量的免费图片。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/a10b0dfd84d83062.png">Visual
                                    Hunt
                                </div>
                                <div class="duty-card-des">
                                    一个提供高品质免费图片素材的站点，收录了海量的CC0授权图片整合后生成的站点，用户可以通过内置的搜索引擎来查询海量的免费图片。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://streetwill.co/" class="duty-card" target="_blank"
                               title="StreetWill - 一个干净整洁无任何广告的图片分享网站，提供超高分辨率的图片资源，就是更新有点慢。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/d10a269e51d73f0a.png">StreetWill
                                </div>
                                <div class="duty-card-des">一个干净整洁无任何广告的图片分享网站，提供超高分辨率的图片资源，就是更新有点慢。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://imcreator.com/free" class="duty-card" target="_blank"
                               title="IM FREE - 免费高清图片库，该站提供搜索和分类目录,有人物、自然、艺术、生活、图标等分类。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/83f2270f01d6b132.gif">IM
                                    FREE
                                </div>
                                <div class="duty-card-des">免费高清图片库，该站提供搜索和分类目录,有人物、自然、艺术、生活、图标等分类。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://fancycrave.com/" class="duty-card" target="_blank"
                               title="FancyCrave - FancyCrave 网站是一个致力于个人和商业免费摄影图片资源库的站点。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/dfcced79f9c0010a.png">FancyCrave
                                </div>
                                <div class="duty-card-des">FancyCrave 网站是一个致力于个人和商业免费摄影图片资源库的站点。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.lifeofpix.com/" class="duty-card" target="_blank"
                               title="LifeOfPix - 免费无版权欧美生活图片网是一个提供免费高清图像素材，并且无版权限制，图片多为欧洲景观，多为摄影师拍摄的生活类图片。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/e38d6ce9a0215dba.png">LifeOfPix
                                </div>
                                <div class="duty-card-des">免费无版权欧美生活图片网是一个提供免费高清图像素材，并且无版权限制，图片多为欧洲景观，多为摄影师拍摄的生活类图片。
                                </div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://kaboompics.com/" class="duty-card" target="_blank"
                               title="kaboompics - 以生活化场景为主，比方说手机、日历之类的，也有一些 mockup，无需登录，直接下载。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/d1853ac3dabd0d32.png">kaboompics
                                </div>
                                <div class="duty-card-des">以生活化场景为主，比方说手机、日历之类的，也有一些 mockup，无需登录，直接下载。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://photos.oliur.com/" class="duty-card" target="_blank"
                               title="Oliur Rahman - 各种 iPhone、MacBook 和其他物件的好照片，直接可以下载，图片可免费商用。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/4e1e7ff3258cfde2.png">Oliur
                                    Rahman
                                </div>
                                <div class="duty-card-des">各种 iPhone、MacBook 和其他物件的好照片，直接可以下载，图片可免费商用。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://source.pixite.co/" class="duty-card" target="_blank"
                               title="Pixite Source - 可以搜索图片、材质、色调搜索，里面有很多比较精致的小众插图。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/d5b45b9e5e9ee6fa.png">Pixite
                                    Source
                                </div>
                                <div class="duty-card-des">可以搜索图片、材质、色调搜索，里面有很多比较精致的小众插图。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://freelyphotos.com/" class="duty-card" target="_blank"
                               title="Freely Photos - 国外一个基督教图片网站，有很多十字架，很多宗教祈祷的图片。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/367250db9eaf4c02.png">Freely
                                    Photos
                                </div>
                                <div class="duty-card-des">国外一个基督教图片网站，有很多十字架，很多宗教祈祷的图片。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://stokpic.com/" class="duty-card" target="_blank"
                               title="Stokpic - Stokpic 免费无版权图片素材库，支持自动把最新图片推送到邮箱。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/28d2e8e9179d309a.png">Stokpic
                                </div>
                                <div class="duty-card-des">Stokpic 免费无版权图片素材库，支持自动把最新图片推送到邮箱。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://jeshoots.com/" class="duty-card" target="_blank"
                               title="JESHOOTS - 2014年开始运营的免费无版权图片网站，图片质量还不错。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/e0d4f893bef4edfa.png">JESHOOTS
                                </div>
                                <div class="duty-card-des">2014年开始运营的免费无版权图片网站，图片质量还不错。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://mmtstock.com/" class="duty-card" target="_blank"
                               title="MMT - 免费图库网站，图片使用CC0授权，网站图片色调比较亮丽，有很多花，也有很多 iPhone等。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/5991b3a22602e702.png">MMT
                                </div>
                                <div class="duty-card-des">免费图库网站，图片使用CC0授权，网站图片色调比较亮丽，有很多花，也有很多 iPhone等。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://picjumbo.com/" class="duty-card" target="_blank"
                               title="PicJumbo - 一个叫维克多的人创办了这个基于网站设计的素材站点，因为每一个设计师都需要高质量的图片素材。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/ef8329ede4e5273a.png">PicJumbo
                                </div>
                                <div class="duty-card-des">一个叫维克多的人创办了这个基于网站设计的素材站点，因为每一个设计师都需要高质量的图片素材。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://alpha.wallhaven.cc/" class="duty-card" target="_blank"
                               title="WallHaven - 世界上最伟大的高清图库站WallBase复制版，原网站创办人失联后，前成员推出的测试版。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/c4842068b8b3a422.png">WallHaven
                                </div>
                                <div class="duty-card-des">世界上最伟大的高清图库站WallBase复制版，原网站创办人失联后，前成员推出的测试版。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://mystock.photos/" class="duty-card" target="_blank"
                               title="My Stock Photos - 免费的可商用的高清图库，图片较少才490多张，但是图片质量非常不错，直接可以下载。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/f5ed36eac541dc8a.png">My
                                    Stock Photos
                                </div>
                                <div class="duty-card-des">免费的可商用的高清图库，图片较少才490多张，但是图片质量非常不错，直接可以下载。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://skuawk.com/" class="duty-card" target="_blank"
                               title="Skuawk - Skuawk 网站是一个集合了自由摄影师拍摄并分享的公共领域摄影图片，任何人都可以下载和使用这些图片。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/119abee93c0e150a.png">Skuawk
                                </div>
                                <div class="duty-card-des">Skuawk 网站是一个集合了自由摄影师拍摄并分享的公共领域摄影图片，任何人都可以下载和使用这些图片。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://en.freejpg.com.ar/" class="duty-card" target="_blank"
                               title="FreeJPG - 免费的可商用的高清图库，可按颜色分类图片，超过1万张免费图片，质量非常高。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/350a36bcb4998842.png">FreeJPG
                                </div>
                                <div class="duty-card-des">免费的可商用的高清图库，可按颜色分类图片，超过1万张免费图片，质量非常高。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.goodfreephotos.com/" class="duty-card" target="_blank"
                               title="Good Free Photos - 大部分为摄影作品，也有少量的插图，右击保存图片就可以下载了。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/9428d01d60c347da.png">Good
                                    Free Photos
                                </div>
                                <div class="duty-card-des">大部分为摄影作品，也有少量的插图，右击保存图片就可以下载了。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.stockvault.net/" class="duty-card" target="_blank"
                               title="Stockvault - Stockvault是一个免费图片分享站点，你可以在此站点注册成为会员，然后分享你喜爱的图片给其他用户。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/554b01ea2a593448.png">Stockvault
                                </div>
                                <div class="duty-card-des">Stockvault是一个免费图片分享站点，你可以在此站点注册成为会员，然后分享你喜爱的图片给其他用户。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.freemagebank.com/" class="duty-card" target="_blank"
                               title="freemagebank - 免费的可商用的高清图库，图片质量很高，只是要注册才能下载图片。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/8ac04b5aee47685e.png">freemagebank
                                </div>
                                <div class="duty-card-des">免费的可商用的高清图库，图片质量很高，只是要注册才能下载图片。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://cupcake.nilssonlee.se/" class="duty-card" target="_blank"
                               title="Cupcake - 免费无版权图库网站，所有图片采用CC0协议授权，图片色调厚实，适合做背景图。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/6c4154e8e8e2fac.png">Cupcake
                                </div>
                                <div class="duty-card-des">免费无版权图库网站，所有图片采用CC0协议授权，图片色调厚实，适合做背景图。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://trunklog.com/" class="duty-card" target="_blank"
                               title="Trunklog - 瑞典的一位摄影师旅行所拍摄的照片，网站所有图片全部无偿使用。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/881f0fae1b270d38.png">Trunklog
                                </div>
                                <div class="duty-card-des">瑞典的一位摄影师旅行所拍摄的照片，网站所有图片全部无偿使用。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://finda.photo/" class="duty-card" target="_blank"
                               title="Finda Photo - 一个可以根据图片的颜色和图片标签以及来源的方式来搜索免费可商用的图片资源网站。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/39f80b526256db78.png">Finda
                                    Photo
                                </div>
                                <div class="duty-card-des">一个可以根据图片的颜色和图片标签以及来源的方式来搜索免费可商用的图片资源网站。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.ssyer.com/" class="duty-card" target="_blank"
                               title="别样网 - 无版权免费大尺寸图片共享平台，图片遵循CC0 协议，随时随地发布使用。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/95319067f6ed64a.png">别样网
                                </div>
                                <div class="duty-card-des">无版权免费大尺寸图片共享平台，图片遵循CC0 协议，随时随地发布使用。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.polayoutu.com/collections" class="duty-card" target="_blank"
                               title="泼辣有图 - 泼辣修图出的开源摄影网站，全部是无版权的摄影作品，所有图片可以用于任何用途。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/1c5dfecae738d0ce.jpg">泼辣有图
                                </div>
                                <div class="duty-card-des">泼辣修图出的开源摄影网站，全部是无版权的摄影作品，所有图片可以用于任何用途。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://699pic.com/" class="duty-card" target="_blank"
                               title="摄图网 - 摄图网是一家专注正版摄影高清图免费下载的图库，免费用户每天只能下载一张图片。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/e4467da6a9d53894.png">摄图网
                                </div>
                                <div class="duty-card-des">摄图网是一家专注正版摄影高清图免费下载的图库，免费用户每天只能下载一张图片。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row duty-item">
                <div class="col-md-12">
                    <div id="row-26" class="anchor-link"></div>
                    <strong class="duty-item-name"><i class="fa fa-thumbs-o-up"></i>精选酷站</strong>
                </div>
                <div class="col-md-12 ">
                    <div class="row">

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.iiiimg.com/#" class="duty-card" target="_blank"
                               title="全球酷站中心 - 同步更新全球html5网站，很适合学习最新网站设计趋势。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/2bb5446dabba05dc.png">全球酷站中心
                                </div>
                                <div class="duty-card-des">同步更新全球html5网站，很适合学习最新网站设计趋势。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://720yun.com/" class="duty-card" target="_blank"
                               title="720云VR社区 - 720云VR社区，是中国最大的VR创作者社区和虚拟现实内容平台。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/5c81380a87354970.png">720云VR社区
                                </div>
                                <div class="duty-card-des">720云VR社区，是中国最大的VR创作者社区和虚拟现实内容平台。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://placeit.net/" class="duty-card" target="_blank"
                               title="Placeit - 在线生成原型模板网站，有可点击的交互、视频、照片。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/2907a82ecf976ece.png">Placeit
                                </div>
                                <div class="duty-card-des">在线生成原型模板网站，有可点击的交互、视频、照片。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://seanhalpin.io/" class="duty-card" target="_blank"
                               title="Sean Blog - 一个在加拿大的优秀的网页设计/前端，对网页设计和喜爱为网络和移动设备创造了热情。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/9f342becc4389192.png">Sean
                                    Blog
                                </div>
                                <div class="duty-card-des">一个在加拿大的优秀的网页设计/前端，对网页设计和喜爱为网络和移动设备创造了热情。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://allthefreestock.com/" class="duty-card" target="_blank"
                               title="AllTheFreeStock - 一个地址，找到所有无版权图片、模型、视频、声效、配色、网页模板、字体、图标、邮件模板&#8230;&#8230;简直就是懒人福音&#65281;">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/b518ab2ac584a3d4.png">AllTheFreeStock
                                </div>
                                <div class="duty-card-des">一个地址，找到所有无版权图片、模型、视频、声效、配色、网页模板、字体、图标、邮件模板&#8230;&#8230;简直就是懒人福音&#65281;</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="http://www.dowebok.com/" class="duty-card" target="_blank"
                               title="dowebok - dowebok - 做好网站。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/756e7a769461b9cc.png">dowebok
                                </div>
                                <div class="duty-card-des">dowebok - 做好网站。</div>
                            </a>
                        </div>

                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <a href="https://www.bandari.net/" class="duty-card" target="_blank"
                               title="班得瑞全球网 - 一个设计非常好看的音乐网站，聆听大自然赐于我们的天籁之音。">
                                <div class="duty-card-tit"><img src="/images/zhanwei.gif"
                                                                data-original="/upload/images/2018/4/1ea8b3692766aec.png">班得瑞全球网
                                </div>
                                <div class="duty-card-des">一个设计非常好看的音乐网站，聆听大自然赐于我们的天籁之音。</div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="footer-main">
                            <p>Copyright © 2017-2019 小呆导航（<a href="https://webjike.com">webjike.com</a>）By SiteServer
                                CMS 提供强力驱动 · 粤ICP备18030223号-1 <a href="/sitemap.html" target="_blank">网站地图</a><a
                                        href="https://github.com/xiaodai945/WEBJIKE" target="_blank" class="pull-right"><img
                                        src="https://img.shields.io/github/stars/xiaodai945/WEBJIKE.svg?style=social"></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <div id="top" class="hidden-xs hidden-sm">
            <ul>
                <li class="top-item">
                    <a href="javascript:;" data-tooltip="联 系客 服"><i class="fa fa-smile-o"></i></a>
                    <span><img src="/images/weixin.jpg"></span>
                </li>
                <li class="top-item">
                    <a href="javascript:;" data-tooltip="意 见反 馈"><i class="fa fa-envelope-o fa-fw"></i></a>
                    <span>我们可以做的更好</span>
                </li>
                <li class="top-item">
                    <a href="javascript:;" data-tooltip="微 信群 聊"><i class="fa fa-weixin"></i></a>
                    <span><img src="/images/qun.jpg"></span>
                </li>
                <li class="top-item">
                    <a href="javascript:;" data-tooltip="返 回顶 部" style="display: none" id="go-top"><i
                            class="fa fa-chevron-up"></i></a>
                </li>
            </ul>
        </div>


    </div>
</div>
<!-- 对话框HTML -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                        class="sr-only">关闭</span></button>
                <h4 class="modal-title">自定义链接</h4>
            </div>
            <div class="modal-body">
                <div class="input-control has-icon-left">
                    <input id="inputAccountExample1" type="text" class="form-control" placeholder="网址名称">
                    <label for="inputAccountExample1" class="input-control-icon-left"><i
                            class="icon icon-header"></i></label>
                </div>
                <div class="input-control has-icon-left" style="margin-top: 15px">
                    <input id="inputAccountExample2" type="text" class="form-control"
                           placeholder="请输入网址，注意网址前面要加上http://">
                    <label for="inputAccountExample1" class="input-control-icon-left"><i
                            class="icon icon-link"></i></label>
                </div>
                <div class="modal-text">
                    <p class="text-red">网址书写格式：http://xxx.com，网址前面一定要加上 “ http:// ” 前缀。</p>
                    <p>tips：自定义链接的数据是储存在浏览器本地缓存上，清空浏览数据（Cookie及其他网站数据）后会导致自定义的数据丢失，所以清理浏览数据的时候切勿选中（Cookie及其他网站数据）选项。</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<!--[if lt IE 9]>
<script src="https://www.webjike.com/dist/lib/ieonly/html5shiv.js"></script>
<script src="https://www.webjike.com/dist/lib/ieonly/respond.js"></script>
<![endif]-->
<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
<script src="https://www.webjike.com/js/jquery.js"></script>
<script src="https://www.webjike.com/dist/js/zui.js"></script>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://www.webjike.com/js/Valine.min.js"></script>
<script src="https://www.webjike.com/js/main.min.js?v=3.0.2"></script>
</body>
</html>
